1

チェックボックスの配列でイベントを発生させようとしています。問題は、DOMがJavaScriptイベントハンドラーとともに最初にロードされた後にこれらのチェックボックスを追加したからといって、クリックされたときにイベントハンドラーがこれらの新しいチェックボックスを起動できないことだと思います。

これは私のコードです：

//this runs after the initial load of the page.
var fillSeries = function() {
    $.getJSON('api/series', function(data) {
    var result = '';
    for(var i = 0; i < data.length; i++) {

        //the first result is structure.
        if(i == 0)
            continue;

        var tablerow = '<tr><td><input type="checkbox" class="showarray" value="'+ data[i].id +'" /> ' + data[i].title + '</td></tr>';
        result += tablerow;
    }
    $('#series-table').append(result);
    // remove the loading icon and text
    $('#loading').remove();
});
}
// checkbox onclick listener
$('.showarray').click(function() {
    console.log($(this).val());
});

どうすればイベントを開始できますか？

4

2 に答える 2

1


新しいコンテンツを追加した直後に、コールバック内にイベント リスナーをアタッチしてみて$('#series-table').append(result);ください。

$('#series-table').append(result).find('.showarray').click(function(e) {
    console.log($(this).val());
});
于 2013-02-17T18:00:41.770 に答える
0

ページの読み込み後に要素が動的にDOMに追加された結果として問題が発生したことが正しい場合は、次を使用してみてください。

$(document).on('click', '.showarray', function() {
    console.log($(this).val());
});

これは、ページがロードされた後に動的に追加された場合でも、クラス名がshowarrayのすべての要素のクリックイベントを処理します。

編集：あなたはすでにそれを機能させているように見えますが、完全を期すために私の答えを修正しました。.on（）は、問題の要素の親要素に関連付ける必要があり、ハンドラーが割り当てられている実際のセレクターは2番目の引数です。

于 2013-02-17T17:58:38.213 に答える