0

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

$('.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') 的情况下做我正在尝试的事情？

4

4 回答 4

0

第一个将处理程序附加到“主体”，当附加处理程序时存在。只有当目标匹配选择器（.multi-column-table tr）时，Body 才会调用处理程序。

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

于 2013-02-25T17:07:58.087 回答
0

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

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

于 2013-02-25T17:09:29.140 回答
0

请参阅第一个将事件body附加到需要附加事件的元素之前存在的事件。

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

于 2013-02-25T17:09:45.703 回答
0

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

// 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 中（并且有效）。

于 2013-02-25T18:08:52.693 回答