How do I select element by class name added after document is ready?

Question

I'm trying to target an element by a class name that I've added to it in jQuery. This seems to work fine if I add a new element, but I can't get the new events to bind to an element that was already in the DOM, but has been changed.

What am I doing wrong?

$(document).ready(function(){  
$(".activateRow").on("click",function(){
     $(this).text('Deactivate').addClass('deactivateRow btn-danger').removeClass('activateRow btn-success');
     $(this).parent().parent().removeClass('inactiveRow');
 });

$(".deactivateRow").on("click",function(){
    $(this).text('Activate').removeClass('deactivateRow btn-danger').addClass('activateRow btn-success');
    $(this).parent().parent().addClass('inactiveRow');
});

 })

score 5 · Accepted Answer · answered May 28 '13 at 16:57

5

To bind to new elements use delegation :

$(document.body).on("click", ".deactivateRow", function(){

answered May 28 '13 at 16:57

Denys Séguret

372,613
87
782
758

Thanks. Will accept as soon as SO lets me. – erfling May 28 '13 at 17:00

score 1 · Answer 2 · answered May 28 '13 at 17:03

Your code seems a little messy, I suggest you use the data api, your elements can have attributes set with data-nameOfYourAttribute='Value'. You can use this in jquery like this: //This is a getter/setter $('#myElement').data('nameOfYoutAttribute')

And for your problem you can do:

$('.myRows').on('click', function() {
    if($(this).data('activated') == false) {
       //Do stuff
       $(this).data('activated', true);
    } else {
       //Do stuff
       $(this).data('activated', false);
    };
});

Hope it helps

Just doing some view testing. Final code will be much cleaner. Thanks for the suggestion. — erfling, May 28 '13 at 17:06

How do I select element by class name added after document is ready?

2 Answers2