jQuery .on() 方法未在目标元素上附加事件答案

【问题标题】：jQuery .on() method not attaching event on target elementjQuery .on() 方法未在目标元素上附加事件
【发布时间】：2013-09-21 00:37:42
【问题描述】：

我的常规 onclick 事件，就像这样工作：

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

但是，当 onclick 事件在动态 HTML 上时，即我要插入到表中的行时，它不再起作用。如：什么都没有发生。所以我查看了这个帖子：Event binding on dynamically created elements?

正如其中所回答的那样，使用 .on() 方法。

我向这个 tr 元素添加了一个类 newrow，现在有了这个：

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

我在这里构建一个新行并插入：

    var newrow='';

    newrow += '<tr class="newrow" data-id="' + id + '">';

    newrow += '<td class="alignleft sorting_1"><span class="viewguestdetails" data-id="' + id + '">' + firstname + ' ' + lastname + '</span>';               
    newrow += '&nbsp;&nbsp;<span class="completeguestdetails" data-id="' + id + '">(' + $("#completedetails").attr('data-message') + ')</span><br/>';

    newrow += '<div class="guestdetails" data-id="' + id + '">';
    newrow += SOME DATA';
    newrow += '</div>';
    newrow += '</td>';

    //add checkboxes
    var checkstatus = 'off';
    newrow += '<td><span class="attendance checkbox-' + checkstatus + '" data-id="' + id + '" data-daypart="day"></span></td>';
    newrow += '<td><span class="attendance checkbox-' + checkstatus + '" data-id="' + id + '" data-daypart="ceremony"></span></td>';
    newrow += '<td><span class="attendance checkbox-' + checkstatus + '" data-id="' + id + '" data-daypart="reception"></span></td>';
    newrow += '<td><span class="attendance checkbox-' + checkstatus + '" data-id="' + id + '" data-daypart="diner"></span></td>';
    newrow += '<td><span class="attendance checkbox-' + checkstatus + '" data-id="' + id + '" data-daypart="party"></span></td>';
    newrow += '</tr>';

    //add the row to the guestlist table
    $('#guestlist tbody').prepend(newrow);

我使用了 jQuery 调试器 (https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi)，发现在插入的行或其中的 span 标签上，没有附加 jQuery 事件。

我错过了什么？

更新我添加了这个并将它移到了 document.ready() 函数之外。在这种情况下，事件被附加：

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

但是已经存在的行不再起作用。可能是因为我的 document.ready() 中还有这个：

$("#guestlist .viewguestdetails").click(function () {        
    $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle();
});

所以，现在，要么新插入的行函数正确，要么已经存在的行函数正确。

为什么？

【问题讨论】：

标签： html jquery dynamic jquery-events

【解决方案1】：

事件委托的重点是使用页面呈现时存在的 DOM 元素。据我了解，您的.newrow不是。所以试试：

$(document).on('click', '.newrow span', function () {

来自 jQuery 文档： 事件处理程序仅绑定到当前选定的元素；当您的代码调用.on() 时，它们必须存在于页面上。

【讨论】：

这行得通！我觉得奇怪的是，当我用新插入行的父级“#guestdetails”或“tbody”替换“document”时，它不再起作用。正如您还提到的，这两个元素都在页面呈现时呈现。这怎么可能？
@Flo，没有看到您的标记，我无法判断。如果元素被替换，事件处理程序将被删除，可能是这样吗？无论如何，很高兴它现在可以工作了:)
我更新了我的帖子，因为在添加您的代码时，现有行不再有效。我注意到 Greg Greg Borenstein 在这里也提到了一些关于此的内容，但不知道是不是这样或如何应用：stackoverflow.com/questions/203198/…
@Flo，在您的页面中是您的代码吗？在html之后还是之前？尝试在 html 之后，底部，</body> 标记之前使用所有 jQuery。（用于调试目的）。否则，当代码在 .ready() 函数之外并且在读取 html 之前它将不起作用，因为 DOM 的元素还没有。
@Flo，我现在要睡觉了。我认为您现在已经在编辑中添加了 2 次代码。一个在就绪函数之外，一个在内部。他们都开火并进行切换。这意味着没有任何反应:) 我在控制台中再次添加了该代码并且它起作用了。我首先怀疑数据表在声明时会删除事件侦听器。您可以删除重复的事件侦听器并尝试一下吗？

【解决方案2】：

部分内容：

 $('.newrow').on('click', 's...

应该是：

 $('parentOfnewrowElement').on('click', '.newrow span...

您所做的是将事件绑定到文档中当前存在的所有 .newRow 元素。您应该做的是将事件绑定到未从文档中删除的第一个父级。

【讨论】：

【解决方案3】：

试试这个：

$(document).on('click', '.newrow span', function () {

页面加载完成后，您要绑定事件的元素需要存在。

【讨论】：