为什么Jquery不能访问我页面上导入的元素?

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

我有我的主页'index。php'我有加载器页面'get_results。php'

因此，当我加载index.php时，JS加载，然后转到get_results.php，然后在屏幕上显示输出，但是，当我单击'x'尝试删除一个部分时，它不起作用。为了添加，我在get_result.php页面上运行了JS脚本，删除工作很好。

我不知道如何解决这个问题，我认为这是因为新的数据(get_results)正在加载index.php文档后。

我想改变当这个数据是加载的，但我仍然会有同样的问题，因为用户可以点击一个按钮，它摆脱了数据，并把新的数据在那里。

当读取文档时，我运行以下命令:

$(".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中找到元素，但我认为，如果我每次引用元素，而不是将其存储在一个变量中，它会再次通过dom来获取它。