Question

我有以下附加到按钮元素的jquery脚本。目前，我只用一个按钮测试，但想法是点击任何按钮将读取按钮的ID，然后将其用作URL的一部分以回叫Web服务器。我正在测试的按钮位于主页面上，即当您到达网站时可见。然而，即使主页（和按钮本身）也通过AJAX调用加载！此按钮也是脚本本身清空的#content元素的一部分，如下所示。

我看到的行为： - 如果我留在主页面并单击按钮，它就可以了。然后，如果我向后导航，它就不再起作用了。

如果我到达网站并远离主页并返回，该按钮将无法再次运行。

模式似乎是如果按钮从DOM中取出，脚本将无法运行。

$(document).ready(function(){
    $("button").bind('click', function(){
          var route = element.attr("id");
          $.ajax(
          {
            type: "GET",
            url: '/' + route,
            dataType: "html",
            async: true,
            success: function(data)
            {
                $( "#content" ).empty();
                $( "#content" ).append( data );
            } 
           }); 
    });
});

我是JQuery和AJAX的新手，即使我确定这是一个微不足道的问题，但我还是无法在网上找到答案。

我正在使用Chrome和JQuery 2.1.1。

非常感谢

更新：还尝试使用$（'body button'）。on（'click'...如下所示，但行为相同。

Answer 1

您将处理程序添加到 DOM元素，这意味着 $。bind（）在其选择器上出现的任何元素上运行一次。删除元素后，它的事件处理程序也会被删除。

如果要继续处理该事件，请在重新添加这些元素时重新应用事件处理程序，或者使用第二个选择器选项通过父级使用$.on()（只要父级不是去除）。这称为事件委派。（$.on()的前身称为$.delegate()，但由于语法原因而被更改。）

$(document).on('click', 'button', func...)

确保并使用第二个参数。也不要将处理程序应用于body，这通常是一个坏主意;如果你必须使用document，或者优先使用更接近DOM的公共父级元素（这样你就不会进行不必要的事件管理）。

JQuery bind（）只触发过一次

1 个答案: