Question

我正在动态地将'password-reset-success-message'div加载到'password-reset'div中，如下面的代码段所示。'password-reset-success-message'div隐藏在页面加载并被覆盖到'password-reset'div，如下所示。

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

现在'password-reset-success-message'div有一个'btnPasswordResetOK'按钮，它将关闭密码重置模式对话框。但是这个click（）事件没有被绑定。我没有得到警报信息。我正在将所有这些内容包装在文档中。

     $(document).ready(function(){  

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

         alert();
       });

    });

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

更新：我在使用隐藏的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文档中使用哪种方法

$（selector）.live（events，data，handler）; // jQuery 1.3 +

$（document）.delegate（selector，events，data，handler）; // 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+

触发就绪事件时，页面上没有您的内容。您可以动态生成元素和内容，因此必须使用live / on事件处理程序。

Answer 3

尝试使用'live'

$(document).on(events, selector, data, handler);

Jquery点击事件没有触发先前隐藏的div

3 个答案: