jQuery code does not fire on modal forms

Question

I have a simple link that will fire an ajax call and change a status, and I want that new status reflected (instantly) on the modal form.

Problem is: when I click the link that is on the modal form (below), nothing happens.

<a title="Autoplay" data-placement="top" data-toggle="tooltip" class="glyphicon glyphicon-stop" id="autoplayStatus" href="#"></a>

In $(document).ready(), I have this:

$("#autoplayStatus").click(function(event){
        alert('test');
    })

Is there something I should do to ensure that jQuery can select and bind to objects on a modal form?

Answer 1

To ensure that jQuery binds to buttons (or other stuff) in modals created by Bootstrap, you should write your event handler like this:

$(document).ready(function() {
    $('.container').on('click', '#autoplayStatus', function() {
        alert('Ohai!');
    });
});

and then, in my example, wrap the anchor tag in a container:

<div class="container">
    <a title="Autoplay" data-placement="top" data-toggle="tooltip" class="glyphicon glyphicon-stop" id="autoplayStatus" href="#"></a>
</div>

On a sidenote, it's better practice to use <button> instead of <a> when creating, well, a button. =)