1

次のように、4 つのチェックボックスのコンテンツをロードする ajax 関数があります。

$.ajax({
url : some url..,
dataType : 'json',
success : function(data) {
    buildCheckboxes(data);
    },
error : function(data) {
            do something...
    }
});

チェックボックスを構築するメソッドは、次のようなことを行います。

function updateNotificationMethods(items) {
    var html = [];
    $.each(items, function(i, item) {
        htmlBuilder = [];
        htmlBuilder.push("<input type='checkbox' class='checkbox-class' name='somename' value='");
        htmlBuilder.push(item.id);
        htmlBuilder.push("'");
        htmlBuilder.push("/>&nbsp;");
        htmlBuilder.push(item.name);
        htmlBuilder.push("<br/><br/>")
        html.push(htmlBuilder.join(''));
    });
    $("#div").html(html.join(''));
}

チェックボックスの値が変更されたときにトリガーされるイベントバインダーもあります。

$(".checkbox-class").change(function() {
alert("change");
 });

サーバーからデータを動的にロードするここでの設定とは対照的に、ソースにチェックボックスhtml(つまり静的)がある場合に機能します。

バインドがタイムリーに行われるようにできることはありますか?

平和！

4

3 に答える 3

4

これは、ハンドラーをバインドするときに要素が存在しないためです。

これを試して：

$( document ).on( 'change', '.checkbox-class', function() {
    alert("change");
});

または、古いバージョンの jQuery (1.7 未満) を使用している場合は ...

$( '.checkbox-class' ).live( function() {
    alert("change");
});
于 2012-10-31T20:00:47.803 に答える
2

イベントをバインドしている間は、チェックボックスは使用できません。 jsfiddle

イベントのバインド中に id div を持つ要素が存在すると仮定します。 

$("#div").on("change",".checkbox-class",function() {
     alert("change");
 });
于 2012-10-31T20:00:00.643 に答える
0

このコード:

$(".checkbox-class").change(function() {
alert("change");
});

do は継続的で継続的なルールを確立しません。代わりに、このコードは、実行時に存在する一致する各 DOM オブジェクトにイベント マネージャー (この場合は change イベント) をアタッチします。
必要に応じて、DOM にチェックボックスを追加するたびに、このコード (または同様の狭いコード) を再実行できます。

于 2012-10-31T20:27:19.673 に答える