jQuery code does not fire on modal forms

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>

Open in new window


In $(document).ready(), I have this:
    $("#autoplayStatus").click(function(event){
            alert('test');
        })

Open in new window


Is there something I should do to ensure that jQuery can select and bind to objects on a modal form?
LVL 32
DrDamnitAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
GaryConnect With a Mentor Commented:
Change this
    $("#autoplayStatus").click(function(event){
            alert('test');
        })

Open in new window

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

Open in new window

0
 
DrDamnitAuthor Commented:
Follow up:
The code works, but I have two elements (checkboxes) in the div. I have used the class / container function so I only have to write one function to manage these, but each of the checkboxes carries with them a data attribute that is requried for an ajax call. $(this) no longer refers to the checkbox clicked, but rather the div. How do I refer to the checkbox that was clicked (specifically) so I can extract that id from the data attribute?
0
 
GaryCommented:
Inside the click event use $(this) to target the actual clicked checkbox
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.