Javascript 事件在html函数之后停止工作

问题是在.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>');
    }

});

$（文档）.ready（函数（）{
创建（）；
$（'body div input'）。单击（function（）{
警惕（“你好”）；
创建（）；
});
函数Create（）{
$（'body'）.html（“”）；
}
});

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

顺便说一下，html代码中的body标记是空白的，并且没有任何CSS，因此这是一个jQuery问题

---

jsidle-

您可以使用函数on（）而不是单击来解决它。

---

您可以使用（）上的函数而不是单击来解决它。

---

这不是jQuery的问题，而是您建立事件处理程序的方式的问题。当您更新容器的内容时（本例中为

），所有以前的内容以及绑定到它们的任何事件都将被抛出

您可以在

元素本身使用事件委派来防止处理程序丢失：

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

---

这取决于浏览器（有时在jQuery的帮助下）将事件传播到DOM树。因此，通过使用该选择器将处理程序置于

以过滤事件，您将能够随时处理添加到正文中的任何

元素上的“单击”事件。

这不是jQuery的问题，而是您建立事件处理程序的方式的问题。当您更新容器的内容时（本例中为

），所有以前的内容以及绑定到它们的任何事件都将被抛出

您可以在

元素本身使用事件委派来防止处理程序丢失：

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

---

这取决于浏览器（有时在jQuery的帮助下）将事件传播到DOM树。因此，通过将处理程序放在带有该选择器的

处以过滤事件，您将能够随时处理添加到正文中的任何

元素上的“单击”事件。

更新的答案

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>');
   }​

});

$（文档）.ready（函数（）{
创建（）；
$（“body”）.delegate（“div输入”，“单击”，函数（）{
警惕（“你好”）；
创建（）；
});
函数Create（）{
$（'body'）.html（“”）；
}​
});

你可以在这里看到

---

更新答案

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>');
   }​

});

$（文档）.ready（函数（）{
创建（）；
$（“body”）.delegate（“div输入”，“单击”，函数（）{
警惕（“你好”）；
创建（）；
});
函数Create（）{
$（'body'）.html（“”）；
}​
});

你可以在这里看到

---

.live（）

方法已经被弃用了很长一段时间。新代码应该使用

.on（）

，它提供了相同的功能和更高效的界面。你是对的，我不知道live函数被弃用了，感谢编辑：

.live（）

方法已经弃用了很长一段时间了。新代码应该使用

.on（）

，它提供了同样的功能和更高效的界面。你是对的，我不知道live函数被弃用了，感谢编辑：DSee我对@mdaguerre答案的评论-

.live（）

方法已经被弃用了好几年了。请参阅我对@mdaguerre答案的评论-

.live（）

方法已经被弃用了好几年了。谢谢，我尝试了live和on方法，它们都很有效，但正如你所说的，live已经被弃用了，所以我当时使用on方法。非常感谢：）谢谢，我确实尝试过live和on方法，它们都很有效，但是正如你所说的live已被弃用，所以我使用on方法。非常感谢：）