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个元素。稍后添加的元素将不会获得触发器。

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

Answer 2

试试这个：

$("#search_results_library").on('click', '.next-click', function(e) {
  e.preventDefault();
  alert("my id: " + $(this).data("id"));

});

JQuery - 点击/链接处理程序的麻烦

2 个答案: