Question

我有一个列出数据库记录的更改，我的主页面使用第二页从中加载信息。我希望用户能够点击“＆＃39; x＆＃39;并能够删除记录。

所以我有我的主页＆＃39; index.php＆＃39;我有一个名为＆＃39; get_results.php＆＃39;

的加载页面

所以当我加载index.php时，JS加载然后转到get_results.php，然后在屏幕上显示输出，但是，当我点击“＆＃39; x＆＃39;尝试删除它不起作用的部分。为了补充一点，我在get_result.php页面上运行了JS脚本，删除工作正常。

我无法弄清楚如何解决这个问题，我认为这是因为在加载index.php文档后正在加载新数据（get_results）。

我考虑过更改何时加载此数据，但我仍会遇到同样的问题，因为用户可以点击按钮，它会删除数据并将新数据放在那里。

当阅读文档时，我运行：

$(".search_results_container").load("get_results.php?service_type=auto #results_output");

这会将新数据加载到其容器中。

然后当点击X时，它应该运行以下代码：

$(".delete_result").on("click", function( e ){
    e.preventDefault();

    var result_id = $(this).data("delete-id");

    // post data to delete page
    $.post("delete_results.php?action=delete&result_id=" + result_id, function( data ){
        // Out delete data
        console.log(data);
       // Refresh list
    } );

});

这是加载到容器中的HTML

<ul class="data_list" id="result_list">
<li>
    <div class="result_info">
        <a href="?action=edit_result&result_id=5" class="update_links">
            <h2>
                Test data 1
                <small>Testing</small>
            </h2>
        </a>
    </div>
    <div class="result_delete_icon">
        <a href="?result_id=5&action=delete" class="delete_result" data-delete-id="5">
            <i class="fa fa-times" style="float: right;"></i>
        </a>    
    </div>
</li>
<div class="result_info">
        <a href="?action=edit_result&result_id=5" class="update_links">
            <h2>
                Test data 1
                <small>Testing</small>
            </h2>
        </a>
    </div>
    <div class="result_delete_icon">
        <a href="?result_id=5&action=delete" class="delete_result" data-delete-id="5">
            <i class="fa fa-times" style="float: right;"></i>
        </a>    
    </div>  
</li>

我真的不知道如何让这个工作，我想也许有些东西需要刷新，因为看起来Jquery似乎没有找到dom中的元素，但我认为如果我每次引用该元素，而不是将其存储在var中，它将再次遍历DOM以获取它。

Answer 1

这不是你认为它做的事情：

$(".delete_result").on("click", function( e ){

这是调用选择器".delete_result" 一次，识别当时存在的元素，并将点击处理程序附加到这些元素。处理程序附加到元素，而不是选择器。因此，在执行此代码后添加到页面中的任何元素都不会附加到它们的点击处理程序。

相反，您正在寻求这样做：

$(document).on("click", ".delete_result", function( e ){

这仍然只执行一次，但是将处理程序附加到document（在DOM的生命周期内不变）。实际上，层次结构中任何常见的不变的父元素都将代替document。第二个选择器".delete_result"在每个事件上使用来过滤来自所选子元素的事件。因此，在DOM生命中晚些时候添加到document的任何元素仍然会“冒出来”＃34;它的点击事件发送到document并由第二个选择器识别。

有关更多示例和信息，我written about this before。

Answer 2

您需要delegate您的活动http://learn.jquery.com/events/event-delegation/

$(document).on("click", ".delete_result",function( e ){...

为什么Jquery无法访问我页面上的导入元素

2 个答案: