Question

问题是在.html（）jQuery函数之后，按钮的事件停止了。这是一个例子 -

$(document).ready(function() {

    Create();

    $('body div input').click(function() {
       alert('Hello');
       Create();
    });

    function Create() {
       $('body').html('<div><input type="button" value="button" /></div>');
    }

});

这里，我第一次点击按钮时事件是有效的，但是再次调用Create（）函数后，事件将不再起作用。

顺便说一下 - html代码中的body标签是空白的，没有任何CSS，所以这是一个jQuery问题。

JSFiddle - http://jsfiddle.net/HVzcy/

Answer 1

您可以使用on（）而不是click来解决问题。 http://api.jquery.com/on/

 $('body').on('click', 'div input', function() {
   alert('Hello');
   Create();
});

Answer 2

这不是jQuery的问题，这是你建立事件处理程序的方式的问题。当您更新容器的内容（在这种情况下为<body>）时，将抛出所有先前的内容以及绑定到它们的任何事件。

您可以在<body>元素本身使用事件委派来防止处理程序丢失：

$('body').on('click', 'div input', function() {
  alert("hello");
});

这取决于浏览器（有时使用jQuery的帮助）在DOM树上传播事件的事实。因此，通过将处理程序放在具有该选择器的<body>来过滤事件，您将能够随时处理添加到正文的任何<input>元素上的“点击”事件。

Answer 3

更新了答案

jquery delegate可以为您提供帮助

$(document).ready(function() {

   Create();

   $("body").delegate("div input", "click", function(){
      alert('Hello');
      Create();
   });

   function Create() {
      $('body').html('<div><input type="button" value="button" /></div>');
   }

});

你可以在这里看到它

http://jsfiddle.net/NjuJ2/1/

事件在html函数后停止工作

3 个答案: