3

I know as of jQuery 1.7, the .live() method is deprecated. So this is what I came up with:

$(document.body).on('click', '#list', function() {
    console.log($(this));
});

Which pretty much does the trick and is equivalent to:

$('#list').live('click', function(){
    console.log($(this));
});

They both return the #list jQuery object, which is what I wanted. The problem is however when I pass a jQuery object as a second parameter, instead of string (which happens quite often), eg:

var list = $('#list');
$(document.body).on('click', list, function() {
    console.log($(this));
});

The console returns $(body) jQuery object. Which is useless in that point. ;) Any ideas?

EDIT: The problem here is NOT how to access the affected object $('#list') from example 1 and 2, but how to access it in example 3.

acid
  • 1,939
  • 4
  • 26
  • 40
  • Possible Duplicate: http://stackoverflow.com/questions/8042576/whats-the-difference-between-jquery-live-and-on – Ahsan Khurshid Jul 27 '12 at 10:51
  • 1
    Not really I think. I desribed my problem concerning accessing the event affected object, not the difference between those two methods. – acid Jul 27 '12 at 11:06
  • The console is returning exactly what is expected $(this) refers to document.body in this case – AbstractChaos Jul 27 '12 at 12:14
  • Absolutely. But how do I access affected object(s) (assuming there are sibling for example)? – acid Jul 27 '12 at 12:33

2 Answers2

3

A pretty clear answer you will find in the official docs:

Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks. In particular, the following issues arise with the use of .live():

  • jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.
  • Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.
  • Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.
  • Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.
  • The .live() method interacts with other event methods in ways that can be surprising, e.g., $(document).unbind("click") removes all click handlers attached by any call to .live()!
Besnik
  • 6,072
  • 1
  • 26
  • 29
1

It's simply incorrect to pass an object as the second parameter to on.

From the docs:

.on( events [, selector] [, data], handler(eventObject) )

It asks for a selector and not a jQuery object, so you need to use:

$(document.body).on('click', '#list', function() {
    console.log($(this));
});
bcmcfc
  • 23,143
  • 28
  • 104
  • 170
  • So how do I access affected selector (if for example there are siblings)? – acid Jul 27 '12 at 12:20
  • As in, if there are other list elements that would be matched by the selector? `$(this)` will refer to the one that was clicked. – bcmcfc Jul 27 '12 at 12:52
  • I've added an edit in the first post, hope I'll that'll highlight the problem. ("The problem here is NOT how to access the affected object $('#list') from example 1 and 2, but how to access it in example 3.") – acid Jul 27 '12 at 12:59
  • 1
    I see. The answer remains the same; you can't. The second argument `on` takes is a selector and not an object. – bcmcfc Jul 27 '12 at 13:01
  • Uhm, I see. Doesn't it deny the DRY concept? – acid Jul 27 '12 at 13:23