Question

我的常规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();
});

所以，现在，要么新插入的行功能正确，要么现有的行功能正确。

为什么？

Answer 1

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

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

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

Answer 2

部分说：

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

应该是：

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

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

Answer 3

请改为尝试：

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

当页面加载时，您要绑定事件的元素需要存在。

jQuery .on（）方法不在目标元素上附加事件

3 个答案: