javascript - JQuery - 点击/链接处理程序出现问题

Question

我在完成这项工作时遇到了一些麻烦，我正在使用 JQuery 从 mySQL 获取结果列表，结果包括一个名称和处理程序链接 (JQuery)，它应该触发一个函数/事件，但由于某种原因无法正常工作

这是我第一页的代码:

此脚本运行查询并使用 JQuery 从 ajax_load.php 文件中获取结果:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

     <script type="text/javascript">
        $(function() {
            $("#lets_library").bind('submit',function() {
                var value_name = $('#name').val();

                if(value_name)
                    {
                    $("#find_library").html('Loading results...');
                    }


                $.post('ajax_load.php',{value_name:value_name}, function(data){

                    $("#search_results_library").html(data);
                });
                return false;
            });
        });
    </script>

同一首页中的其他脚本用于点击处理程序，显示被点击的 ID，但它不起作用:

 <script type="text/javascript">
$(document).ready(function(){

    /// shows my ID from the result row ///
    $('.next-click').click(function() {
    alert("my id: " + $(this).data("id"));

    });
});
</script>

这是来自ajax_load.php 的代码的一部分，它返回带有链接 和ID 的结果 被点击:

while($row = mysql_fetch_array($result_query))
{


echo '
<table width="100%" border="1">
<tr>
<td> 
'; 
echo '<a href="#" class="next-click" data-id="'; echo $row['ID']; echo '">';
echo $row['name'];
echo '</a>
</td>
</tr>   
</table>';

}

问题是，当我点击链接时，它会在 URL 页面的末尾添加一个#，但没有任何反应，就像脚本根本不存在一样。请帮忙!

Answer 1

您需要使用 event delegation因为链接是动态创建的

$(document).ready(function () {
    /// shows my ID from the result row ///
    $('#search_results_library').on('click', '.next-click', function () {
        alert("my id: " + $(this).data("id"));
    });
});

当您使用 $('.next-click').click(..) 时，点击处理程序将仅注册到那些 next-click 元素执行脚本时存在于页面中。后面添加的元素不会得到触发器。

所以解决方案是将处理程序绑定(bind)到 dom 中已经存在的元素(它是目标元素的祖先)，但传递一个额外的选择器，它将指定我们正在寻找的实际目标。 jQuery 的 .on()方法提供了这个功能