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')すべての要素の静的リストを提供するためです。そのセレクターに一致する新しい要素がページに追加されても、更新されません。<tr>

コンテナon()要素にイベントをアタッチでき、イベント バブリングのおかげで、動的に追加された要素を含む、子/子孫要素のイベントをリッスンできます。

于 2013-02-25T17:09:29.140 に答える
0

bodyイベントをアタッチする必要がある要素の前に存在する にイベントをアタッチする最初のものを参照してください。

イベントが添付されたときにそれも存在しないため、2番目のものは機能しません。

于 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 に答える
0

1 つ目は、ハンドラーがアタッチされたときに存在する「body」にハンドラーをアタッチします。ターゲットがセレクター (.multi-column-table tr) と一致する場合にのみ、ボディはハンドラーを呼び出します。

2 つ目は、まだ DOM にない要素にハンドラーをアタッチしようとします。

于 2013-02-25T17:07:58.087 に答える