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

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

顺便说一句 - HTML代码中的主体标签是空白的，它没有任何CSS，所以这是一个问题。

jsfiddle -http：//jsfiddle.net/hvzcy/

您可以使用（）上的函数而不是单击。http://api.jquery.com/on/

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

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

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

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

依靠以下事实：浏览器（有时在jQuery的帮助下）将事件传播到DOM树上。因此，通过将处理程序与该选择器一起放在<body>上进行过滤事件，您可以随时在任何添加到身体的<input>元素上处理"单击"事件。

更新答案

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/

相关内容

最新更新

热门标签：