点击Handler找不到目标按钮

Question

当我单击按钮时，我使用了单击处理程序来执行请求。 当按钮位于 滑块之外时，此事件可以正常工作。 如果我在 slider 应用点击事件。 我尝试了很多方法让它工作，但仍然不明白是什么原因造成的。

像 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，尽管任何不变的分层父元素都可以），所以处理函数不会丢失。这称为event delegation。