click event not firing on elements inside thickbox

Question

In my plugin I am using thick box modal window to show the list of items. The content in the thickbox div is generated through a ajax request. I have input checkboxes inside this div. The click event on these check boxes are not triggered.

Here is my code:

<div id="wpb_media_tracks_container">    //This div is loaded into the thickbox and contents of this table are dynamically generated through ajax request
    <table class="wp_media_tracks_table">   
         <thead>
            <tr>
                <th>Choose tracks</th>
                <th>Filename</th>
                <th>Title</th>
            </tr>
        </thead>
        <tbody>
            <tr valign="top">
                <td scope="row">
                   <input type="checkbox" name="1522" value="1522">
                </td>
                <td>raagrang.mp3</td>
                <td>raagrang</td>
             </tr>
         </tbody>
     </table>
 </div>

jQuery code:

jQuery('.wp_media_tracks_table input').on("click", function() {

    postId = jQuery(this).val();
    alert(postId);
});

I also tried using this selectotr: jQuery('#wpb_media_tracks_container input'). But no results.

Can any one help me find the issue in my code?

Thanks,

Answer 1

Depending on when your jQuery event handler is attempted to be bound, the element it is looking for probably doesn't exist.

You could replace your click event registration with something like:

jQuery('#thickboxid').on('click', '.wp_media_tracks_table input', function(e) {

Where thickboxid is a non ajax loaded element (i.e. exists before ajax is run). I'm not sure if the wpb_media_tracks_container div meets this criteria.