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

Question

我进行了一项更改，列出了数据库中的记录，我的主页使用第二个页面从中加载信息。我希望用户能够单击“x”并能够删除记录。

所以我有我的主页“index.php”和名为“get_results.php”的加载器页面

因此，当我加载index.php时，JS会加载，然后转到get_results.php，然后在屏幕上显示输出，但是，当我单击“x”尝试删除一个部分时，它不起作用。除此之外，我已经在 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" ，用于每个事件来过滤所选子元素中的事件。因此，任何添加到document的元素在 DOM 生命周期的后期，其点击事件仍将“冒泡”至 document并由第二个选择器识别。

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