1

我的常规 onclick 事件，就像这样有效：

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

但是，当该 onclick 事件在动态 HTML 上时，即我要插入到表中的行时，它不再起作用。如：什么都没有发生。所以我查看了这篇文章：动态创建元素上的事件绑定？

正如那里所回答的那样，使用 .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();
});

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

为什么？

4

3 回答 3

1

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

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

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

于 2013-09-16T18:54:54.897 回答
1

部分说：

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

实际上应该是：

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

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

于 2013-09-16T18:56:26.033 回答
0

试试这个：

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

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

于 2013-09-16T18:55:07.850 回答