Question

我调用一个将表格注入页面的服务：

$('.lobSelect').click(function (e) {
        e.stopPropagation();
        var yOffset = $(this).position().top + $(this).height() + 'px';
        var xOffset = $(this).position().left + 'px';

        $('<div class="dropdown-wrapper"></div>')
            .css('top', yOffset)
            .css('left', xOffset)
            .html('foo')
            .prependTo('body');

        $.ajax({
            url: 'http://localhost:15485/api/lineofbusiness',
            type: 'get',
            dataType: 'json'
        })
        .done(function (data) {
            var table = '<table class="multi-column-table">'
            data.forEach(function (item) {
                table += '<tr>';
                table += '<td data-target-class="lobSelect">' + item.LOB_Code + '</td>';
                table += '<td data-target-class="">' + item.LOB_Name + '</td>';
                table += '</tr>';
            });
            $('.dropdown-wrapper').html(table);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        });
    });

为什么这会附加一个处理程序：

$('body').on('click', '.multi-column-table tr', function () {
        //do stuff
    });

但不是这样：

$('.multi-column-table tr').on('click', function () {
        //do stuff
    });

修改

我原以为On（）允许你将处理程序绑定到将来注入的元素。如果不使用$（'body'），有没有更好的方法来做我正在尝试的事情？

Answer 1

第一个将处理程序附加到'body'，它在附加处理程序时存在。如果目标与选择器匹配，则Body仅调用处理程序（.multi-column-table tr）。

第二个尝试将处理程序附加到尚未在DOM中的元素。

Answer 2

因为$('.multi-column-table tr')在您调用选择器时提供了与选择器匹配的所有<tr>元素的静态列表。它不会更新，因为与该选择器匹配的新元素将添加到页面中。

这是使用on()的重点 - 您可以将事件附加到容器元素，并且由于事件冒泡，您可以侦听子/后代元素上的事件，包括动态添加的元素

Answer 3

请参阅第一个将事件附加到body，该{{1}}存在于需要附加事件的元素之前。

第二个不起作用，因为在附加事件时也不存在。

Answer 4

我在添加表时会附加处理程序。

// untested
.done(function (data) {
    var $table = $('<table class="multi-column-table">');
    data.forEach(function (item) {
        var $tr = $('<tr>').appendTo($table);
        var $td = $('<td data-target-class="lobSelect">').text(item.LOB_Code);
        var $td2 = $('<td data-target-class="">').text(item.LOB_Name);
        $tr.append($td);
        $tr.append($td2);
        $tr.on('click', function () {
            // do stuff
        });
    });

    $('.dropdown-wrapper').html($table);
 })

正如我在评论中提到的，$('.multi-column-table tr')不起作用，因为在设置事件处理程序时它不在DOM中，但$('body')在DOM中（并且有效）。

On（）没有将处理程序附加到动态插入的元素

4 个答案: