jQuery点击事件在动态插入的HTML元素上无法触发？

Question

我的onclick事件有效。 但是，当该onclick事件在动态HTML上时，它不再起作用。 就像这样：什么也没发生。

$(document).ready(function () {
    $("#guestlist .viewguestdetails").click(function () {        
        $(".guestdetails[data-id='18']").toggle();
    });
});

我随后将这个HTML动态添加到页面：

<div id="guestlist">    
    <span class="completeguestdetails" data-id="18">(add your data)</span>  
        <div class="guestdetails" data-id="18" style="display: none;">
            some data
        </div>
</div>

然而，当我点击“(添加你的数据)”时，没有任何反应。当HTML静态存在于我的页面中时，这个“guestdetails” div的切换确实有效。

更新：

我要插入的新动态HTML是现有表格中的一行。其他行已经附加了 onclick 事件的事件，例如：

$("span.guestattendance").click(function () {
    if ($(this).hasClass('checkbox-on')) {
        $(this).removeClass('checkbox-on').addClass('checkbox-off');
        $("#guestday").removeClass('checkbox-on').addClass('checkbox-off');
    }
    else {
        $(this).removeClass('checkbox-off').addClass('checkbox-on');            
        if ($("#guestceremony").hasClass('checkbox-on') && $("#guestreception").hasClass('checkbox-on') &&
        $("#guestdiner").hasClass('checkbox-on') && $("#guestparty").hasClass('checkbox-on')) {
            $("#guestday").removeClass('checkbox-off').addClass('checkbox-on');
        }
    }
});

由于用户可以插入多行，我没有使用id，而是在我要插入的元素周围添加了一个包装器:

然后在ready()函数中：

$('.newrow_wrapper').on('click', 'span', function () {
    $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle();
});

然而，第一个问题是，当我在tr标签周围包裹div时，插入的HTML中所有的tr和td标签都被删除了！另外，当我点击span以查看guestdetails时，什么也没有发生。

- Adam

Answer 1

做这个：

 $( '#wrapper' ).on( 'click', 'a', function () { ... });

其中 #wrapper 是一个静态元素，在其中添加动态链接。

因此，您有一个包装器，它已经硬编码到HTML源代码中：

<div id="wrapper"></div>

你需要用动态内容填充它。思路是将事件委托给该包装器，而不是直接在动态元素上绑定处理程序。

- underscore

---

我尝试了这个，看看我的更新帖子。但它不起作用...我错过了什么？ - Adam

Answer 2

使用.on()方法附加事件处理程序来动态绑定HTML元素。这是关于文档的链接：http://api.jquery.com/on/

写出类似以下的内容：

      $( '#someid' ).on( 'click', function () { ... });

或者类似这样的东西。

          $(document).on( 'click', 'tag_name', function () { ... });

- Gourav

---

谢谢...运行得很好....:) - Chirag Parekh

"on" 点击会为所有匹配 'tag_name' 的未来元素绑定此事件。这就是与 "click" 相比特殊的地方，后者仅将事件绑定到当前元素。每当您需要为动态加载的元素绑定事件时，请使用 "on"。 - Dhanuka777

只有第二个对我有效。 - Nabzi

第二个救了我的命。花了4个小时来修复它。非常感谢啊。 - Lincoln

$(document).on('click', 'tag_name', function() { ... }); 这个解决方案对我的情况起了作用。 - bubencode

Answer 3

jQuery.on() 用于在动态插入的HTML元素上绑定任何事件。使用方法如下：

$(document).ready(function () {
    $(document).on('click',"#guestlist .viewguestdetails",function () {        
        $(".guestdetails[data-id='18']").toggle();
    });
});

- Nishu Tayal