click event not firing on elements inside thickbox

Question

In my wordpress 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 its contents 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 selector: jQuery('#wpb_media_tracks_container input'). But no results.

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

Edit:

More details:

Here is 'a' element which calls the thickbox to load the div with id=wpb_media_tracks.

<a href="#TB_inline?width=800&height=550&inlineId=wpb_media_tracks" class="thickbox">Add Tracks</a>

And I have set the div#wpb_media_tracks to display: none; (So that it is only displayed inside the thickbox modal).

Thanks,

Answer 1

Since the div is loaded via ajax, this jQuery('.wp_media_tracks_table input') will not be recognized. You must get the parent of div#wpb_media_tracks_container which is existing DOM (not loaded via ajax), to attach event listener.

For e.g. div#thickbox is the parent that containing div#wpb_media_tracks_container, this one should work $('div#thickbox').on('click', 'input', function() { ... });