jQuery not detecting clicks on dynamically inserted element

Question

I have the following modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <h4 id="mt" class="modal-title" id="myModalLabel"></h4>
        </div>
        <div id="mb" class="modal-body">
        </div>
        <div id="mf" class="modal-footer">
        </div>
    </div>
</div>

I have a button in a table, which kicks off a jquery ajax call and pulls in the title, body, and footer of the modal. You can see that script below.

<script>
$(document).ready(function(){

$('a.btn').click(function(){
    var org_id = $(this).attr('org_id');
    $.ajax({
        type: 'post',
        url: '/groups/' + org_id + '/leave',
        success: function(data){       
            var data = $('<div>').html(data);
            var msg1 = data.find('#msg1');
            var msg2 = data.find('#msg2');
            var msg3 = data.find('#msg3');
            $('#mf').html(msg3);
            $('#mt').html(msg2);
            $('#mb').html(msg1);
        }
    });
});

$('#killgroup').click(function(){
    alert('made it');
    });
});
</script>

Once the modal is fully populated with data, the footer section looks like this:

<div id="mf" class="modal-footer"><div id="msg3"><a id="killgroup" class="btn btn-danger">I'm Positive. Kill Group Forever.</a><a data-dismiss="modal" class="btn btn-success">Wait! Let me re-think this.</a></div></div>

The problem that i'm having is that when I click the button with the id, "killgroup", it does nothing. If you look above at my jquery code, the second section tries to react to that button click:

$('#killgroup').click(function(){
alert('made it');
});

});

I cannot get that to work. It seems as though there might be a chicken before the egg issue going on here but I am very new to jquery / javascript so I am not sure. Basically, I want to be able to click that dynamically created button and kick off another jquery script.

score 5 · Accepted Answer · answered Aug 21 '14 at 01:52

The code:

$('#killgroup').click(function(){ ... });

...says to find an element with id 'killgroup' which exists at the moment that code runs and then assign a click handler to that element.

In your case of course the element doesn't exist yet. The two usual ways to make it work are to either move the .click() call to just after the code that creates the element (in your Ajax callback) or to use a delegated click handler bound to a parent element that does exist at the time (or bound to the document if there is no parent element):

$('.modal-content').on('click', '#killgroup', function() {
   alert('made it');
});

That variation of the .on() method will bind the handler to the element(s) in the jQuery object - in this case I've used '.modal-content' because you know that exists at the start - and then when a click occurs jQuery automatically tests whether the click originated in a child of that element that matches the selector in the second argument, '#killgroup'.

score 3 · Answer 2 · answered Aug 21 '14 at 01:50

Just use the .on() function for dynamically loaded elements...

The problem is you're assigning a click handler to a non existant element.

This will fix your issue.....

$(document).on('click','#killgroup',function(){
   alert('made it');
 });

It used to be the .live() function, but that was deprecated. .on() should do the trick

jQuery not detecting clicks on dynamically inserted element

2 Answers2

Linked