Jquery单击事件不触发以前隐藏的div

Question

我正在加载一个‘密码重置-成功-消息’div到一个‘密码重置’div动态显示在下面的片段。‘密码重置-成功消息’div隐藏在页面加载，并被覆盖到‘密码重置’div如下所示。

    $("#password-reset").html($("#password-reset-success-message").html());

现在‘密码重置-成功消息’div有一个'btnPasswordResetOK‘按钮，它将关闭密码重置模式dialog.But，这个click()事件没有被绑定。我没有收到警告信息。我正在做所有这些包装在文档中准备好。

     $(document).ready(function(){  

       $("#btnPasswordResetOK").click(function() {

         alert();
       });

    });

注意：This question is almost similar to my question..but没有答案。

更新:在用隐藏的div更新html之后绑定的！，下面的代码片段

      $("#password-reset").html($("#password-reset-success-message").html());

       $("#btnPasswordResetOK").click(function() {

            alert();
       });

Answer 1

将其委托给要向其添加html的父元素。

如果将jQuery 1.7+与.on()一起使用

$("#password-reset").on('click','#btnPasswordResetOK',function(){

})

带委托

$("#password-reset").delegate('#btnPasswordResetOK','click',function(){

})

从jQuery文档中可以使用哪种方法

$(选择器).live(事件、数据、处理程序)；// jQuery 1.3+ $(Document).delegate(选择器、事件、数据、处理程序)；// jQuery 1.4.3+ $(Document).on(事件、选择器、数据、处理程序)；// jQuery 1.7+

通过委托，您可以将事件处理程序绑定到一个静态父元素，该父元素在绑定时不会更改并存在。指定要侦听的元素和事件，当事件冒泡时，它将由静态父元素处理。

Answer 2

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

触发就绪事件时，页面上的内容不存在。动态生成元素和内容，因此必须使用活动/on事件处理程序。