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

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.

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

Click Handler can't find the target button

html

ajax

jquery

event-handling

jquery-steps