0

Today, I try to answer to the question here. So, the person how asked question uses jQuery 1.6 for some reason (I have never used this version by myself before). However i knew about .live() event attachment with data option from documentation, which was deprecated in 1.7. So, when i used $(this) inside of event handling function it returns selector object not data object.

So I created two test file here, one in jQuery 1.6.4 and other in 1.10.1 as following.

Jquery 1.6.4

$('body').live('click', 'span.some_class', function(e){
    console.log($(this))
});

Jquery 1.10.1

$('body').on('click', 'span.some_class', function(e){
   console.log($(this));
});

In first case i got following output:

[body, context: body, constructor: ....

In second case i got following output: 

[span.some_class, context: ......

So, I have question, Why output is different? Can someone give me explanation who have historical knowledge on this?. Because it can be really useful to my to help to others when they ask me question related to jQuery 1.6.4.

Edit: So i understand what I did wrong here is I messed .live() with .on() which is not equivalent in newer version of jQuery. So .on() is equivalent to .delegate() in 1.6.4 and live() equivalent to bind(). Sorry for my question. I did not read documentation carefully.

Community
  • 1
  • 1
Khamidulla
  • 2,927
  • 6
  • 35
  • 59
  • 1
    your syntax for live is not correct, at least not as you expect it to be – A. Wolff Jan 03 '14 at 09:47
  • @A.Wolff Can you point it out please? I really want to understand what is wrong here. – Khamidulla Jan 03 '14 at 09:48
  • 3
    Should be more like `$('span.some_class').live('click', function(e){ ...`. Your version will bind the event to `body` instead of `span.some_class` – techfoobar Jan 03 '14 at 09:48
  • 1
    @Phoenix second (optional) argument for live is a data object, not a string selector. `.live( events, data, handler(eventObject) )` – A. Wolff Jan 03 '14 at 09:49
  • possible duplicate of [jQuery: live() vs delegate()](http://stackoverflow.com/questions/4204316/jquery-live-vs-delegate) – John Dvorak Jan 03 '14 at 09:50
  • 1
    @Phoenix - As AWolff pointed out, the second optional arg isn't a selector. Docs: http://api.jquery.com/live/ – techfoobar Jan 03 '14 at 09:50
  • @Phoenix no, the sig method is different, check the DOC. Live is similar to bind but for element present or not in DOM at time of processing binding code. In fact, live uses document level to bind event – A. Wolff Jan 03 '14 at 09:50
  • @A.Wolff thank you I understand what is wrong here. Should I delete my question? Because people giving me minus points for not reason. I did not understand first what i did wrong. Now it is clear to me. – Khamidulla Jan 03 '14 at 09:57

1 Answers1

1

The difference between live and on is that live is attached directly to the element and on is delegated to the element. on() was introduced to simplify all kind of jQuery bindings (also bind() and delegate()).

Consider the following html:

<div class="foo">
     <div class="bar">
     </div>
</div>

And this jQuery-bindings:

//live() checks the whole DOM on every change, could get very slow 
$(".bar").live("click",...);

//on() only has to check a part of the DOM on changes
$(".foo").on("click",".bar",...);

And, why is your console output wrong?

You're not using live correct. It must be: $('span.some_class').live('click', function(e){... }); The second parameter is just to parse additional data.

Jan Hommes
  • 5,122
  • 4
  • 33
  • 45