jQuery .on() sometimes works, sometimes not

Question

I have weird problem. At first I didn't want to use .on() method because I couldn't get it to work at all, so I used .live().

Now, I'm writing a new jQuery script and I used .on() heavily and it works. Until now.

jQuery code:

   $('#artistList a').on('click',function(e){
    console.log($(this).parent().text());
    e.preventDefault();
   });

HTML Code:

<div id="artistList">
 <div class="artist"><a class="delete" href="#"></a>Psy</div>
 <div class="artist"><a class="delete" href="#"></a>Fernanda Martins</div>
 <div class="artist"><a class="delete" href="#"></a>DJ Nreal</div>
</div>

Also tried this methods:

   $('#artistList>a').on('click',function(e){
   $('.delete').on('click',function(e){

No luck. What am I missing?

This is the only part that doesn't work

I have read the documentation about .on() and based on that, this should work. Also, I'm using the latest jQuery, (jquery-1.8.3.min.js).

EDIT

<a> elements have a width: 15px and height: 15px in CSS, so they are visible.

`on` is not like `live`. `on` needs to be delegated to have the same affect. — Travis J, Dec 24 '12 at 00:13

score 6 · Accepted Answer · answered Dec 24 '12 at 00:31

In order to work like live you need to delegate the handler to a higher level element.

 $('body').on('click','#artistlist a', function(e) {
     // note the change to the selector to reflect your actual mark up
     // handler body
 });

Using this form of on is required if the elements to which the handler should apply are added dynamically after the page is initially loaded. Note also that the handlers should be applied after the DOM is loaded either by placing scripts just before the end of the body element or using the ready event handler, $(function() { ... });

If a handler sometimes works and sometimes doesn't it's likely a race condition on page load between the elements being loaded into the DOM and the script being invoked. This is usually a sign that you've omitted adding the handlers inside the ready event handler.

raina77ow · Answer 2 · 2012-12-24T00:18:29.323

3

Your links (<a> elements) are empty here, so they obviously fail to catch click event. I suppose you forgot to move those Psy, Fernanda Martins etc. inside <a href="..."></a>.

Also, only the second selector will actually collect these links (as all they have class delete on them). The first one - '#artistList>a' - tries to find the anchors that are direct descendants of the element with artistList id. But it's destined to fail in this noble quest, because there's another layer separating them - <div class="artist">. So the rule should probably be something like '#artistList a'.

edited Dec 24 '12 at 00:18

answered Dec 24 '12 at 00:13

raina77ow

91,589
12
180
210

I just tried to add this two: _ _ and _aa_ into , no luck, elements still don't catch click event. About the second selector, this was my typo, I should add one more >div in there. Let me just say, that this worked perfectly with .live(). – Kristjan O. Dec 24 '12 at 00:26
Honestly speaking, that doesn't make any sense - unless these elements are added to DOM _after_ the lines that assign click handler to them are invoked. What happens if you use this form: `$('body').on('click', '#artistList a', function() {...})`? – raina77ow Dec 24 '12 at 00:31
Nope, the lines are there before `$(document).ready()` fires. I just found this: http://stackoverflow.com/a/12950226/777700 It's similar to your suggestion and it works, even with nothing in between ``. – Kristjan O. Dec 24 '12 at 00:35

jQuery .on() sometimes works, sometimes not

2 Answers2