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

Click Handler can't find the target button

我在单击按钮时使用了单击处理程序来执行请求。 当按钮位于 滑块之外时,此事件运行良好。 同样,如果我在 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) 内的按钮时,点击处理程序不起作用。

我敢肯定这个问题听起来很愚蠢,但我将不胜感激任何简短的建议或提示。 谢谢你的问候,弗拉基米尔。

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

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

但是,这将从 DOM 中删除该元素(我假设用另一个类似的元素替换它?):

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

原来的 button 现已消失,它的点击处理程序也已消失。所以点击新按钮将不会执行任何操作,因为它没有处理程序。

与其将处理程序直接附加到(短暂的)button,不如将其附加到公共父元素并在 button 上进行筛选。像这样:

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

这样处理程序本身就附加到一个不变的元素(在本例中 document,尽管任何不变的分层父元素都可以)所以处理函数不会丢失。这叫做event delegation.