2

问题是在 .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/

4

3 回答 3

2

您可以使用函数 on() 而不是单击来解决它。 http://api.jquery.com/on/

 $('body').on('click', 'div input', function() {
   alert('Hello');
   Create();
});
于 2012-10-19T13:13:24.787 回答
1

这不是 jQuery 的问题，而是您建立事件处理程序的方式的问题。当您更新容器的内容时​​（<body>在本例中为 ），之前的所有内容以及绑定到它们的任何事件都将被丢弃。

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

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

这依赖于浏览器（有时在 jQuery 的帮助下）将事件向上传播到 DOM 树的事实。因此，通过将处理程序<body>与该选择器一起放置以过滤事件，您将能够随时处理<input>添加到正文的任何​​元素的“单击”事件。

于 2012-10-19T13:14:21.050 回答
1

更新的答案

jquerydelegate可以帮助你

$(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/

于 2012-10-19T13:16:02.690 回答