jQuery click function by class not working

Question

I have two lists with different classes,

<li><a href='#' class="cls1" name="X">blah</a></li> <!-- Click to load a cls2 item -->
<li><a href='#' class="cls1" name="Y">blah</a></li>

<li><a href='#' class="cls2" name="A">blah</a></li>
<li><a href='#' class="cls2" name="B">blah</a></li>

I have this script to handle click function.

$(function(){
$('.cls1').click(function(e){
    alert('cls1 clicked');
    e.preventDefault();
    ... //ajax call to load cls2 items
    });
$('.cls2').click(function(e){
    alert('cls2 clicked');
    e.preventDefault();
    ...
    });
)};

Important The cls2 class items are loaded by an ajax function called in cls1 click function

The cls1 items click function works fine, but when i click any cls2 item, nothing happens.

Is there any problem by adding it after the whole page loads? (by ajax call)

Another issue I notted is that if i refresh the page, and i change the cls1 class to cls2 in the code (using chrome console) the css changes correctly but it still doing the cls1 click function. Why???

Any Idea? I have tried to change the click function order, change the class names, even with another jquery library... (I am using v1.11.1)

Issue example here: http://jsfiddle.net/f7o5y3ek/

this is an example of my problem: http://jsfiddle.net/f7o5y3ek/ — Alex Lord Mordor, Nov 26 '14 at 18:51

steel · Answer 1 · 2014-11-26T18:49:14.277

2

If I understand correctly, your issue is you're adding event listeners to elements that don't exist yet. You have to add the .cls2 listeners after those elements are created by your ajax call.

Something like this (converted form Coffeescript, sorry):

$.ajax("path/to/call", {
  success: (function(_this) {
    return function() {
      return _this.addItems;
    };
  })(this)
});

({
  addItems: function() {
    // add new items & listeners here
  }
});

Alternately, and better I think, is to use event delegation, like this:

$( "parent_selector" ).on( "click", ".cls2", function( event ) {
    event.preventDefault();
    console.log( "clicked!" );
});

edited Nov 26 '14 at 18:49

answered Nov 26 '14 at 18:43

steel

11,883
7
72
109

if I add an "invisible" cls2 item at the beginning, and then add the others by ajax, will it work? – Alex Lord Mordor Nov 26 '14 at 18:52
Nope. Check out the event delegation solution at the end, for a more robust solution. – steel Nov 26 '14 at 18:53

score 2 · Accepted Answer · answered Nov 26 '14 at 18:50

2

Add the cls2 click handler to the ajax success part or try with this:

$(document).on('click, '.cls2', function(e){
    alert('cls2 clicked');
    e.preventDefault();
    ...
    });
)};

answered Nov 26 '14 at 18:50

Salil Dabholkar

622
3
7

jQuery click function by class not working

2 Answers2