单击"处理程序找不到目标"按钮

Question

当我点击按钮时，我使用点击处理程序来执行请求。当按钮位于滑块之外时，此事件运行良好如果我在滑块处应用单击事件，也是如此。我尝试了很多方法来让它发挥作用，但仍然不明白是什么导致了这种情况。

像jquery步骤这样的jquery脚本会影响另一个jquery脚本吗？

HTML:

<div id="main">
<div id="slider">
    <h3>1</h3>
    <section>
        <p id="head">I'm using JQuerySteps.</p>
        <p id="body"><button type="button">Here is the button.</button></p>
    </section>
</div>
</div>

jQuery:

$("button").click(function(){
    $("#main").load("get.php", function(responseTxt, statusTxt, xhr){
    });
});

问题：当我尝试在jquery步骤（#slider）中单击按钮时，单击处理程序不起作用。

我相信这个问题听起来很愚蠢，但如果有任何简短的建议或提示，我将不胜感激。谢谢你，弗拉基米尔。

Answer 1

这将在匹配的元素上创建一个点击处理程序：

$("button").click(function(){
    // ...
});

然而，这将从DOM中删除该元素（我假设用另一个类似的元素替换它？）：

$("#main").load();

原来的button现在不见了，它的点击处理程序也不见了。因此，单击新按钮将不起任何作用，因为它没有处理程序。

与其将处理程序直接附加到（短期）button，不如将其附加到button上的公共父元素和筛选器。类似这样的东西：

$(document).on('click', '#body button', (function(){
    // ...
});

通过这种方式，处理程序本身被附加到一个不变的元素（在本例中为document，尽管任何不变的层次结构父元素都可以），因此处理程序函数不会丢失。这称为事件委派。