Question

在我的wordpress插件中，我使用厚盒模式窗口来显示项目列表。 thickbox div中的内容是通过ajax请求生成的。我在这个div中输入了复选框。不会触发这些复选框上的单击事件。

这是我的代码：

<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代码：

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

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

我也尝试过使用这个选择器：jQuery（＆＃39; #wpb_media_tracks_container输入＆＃39;）。但没有结果。

任何人都可以帮我在代码中找到问题吗？

编辑：

更多详情：

这是＆＃39; a＆＃39;调用thickbox以使用id = wpb_media_tracks加载div的元素。

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

我已将div＃wpb_media_tracks设置为display：none; （因此它只显示在thickbox模态中）。

谢谢，

Answer 1

由于div是通过ajax加载的，因此无法识别此jQuery('.wp_media_tracks_table input')。您必须获取div#wpb_media_tracks_container的父级（现有DOM（未通过ajax加载））来附加事件侦听器。

例如div#thickbox是包含div#wpb_media_tracks_container的父级，这个应该有效$('div#thickbox').on('click', 'input', function() { ... });

单击事件不会触发thickbox中的元素

1 个答案: