0

私は次のコードを持っています:

$('div[class^=locked_]').click(function() {
        var newThis = $(this) ;
        $(this).load(url + " #" + $(this).attr("id"), function() {
            var loaded = $(this).children("#" + $(this).attr("id")) ;
            alert($(loaded).attr("class")) ; // displays "locked_true"
            $(newThis).replaceWith($(loaded)) ;
            alert($(newThis).html()) ;

        }) ;
    }) ;

取得した動作がわかりません。最初のアラートには、正しいクラスが表示されます (「locked_」で始まります)。2 番目のアラートには null が表示されます。適切なクラスがありますが、同じボタンを再度クリックすることはできません。それは正常ですか？私は何をすべきか ？

4

2 に答える 2

6

イベント ハンドラー (委任されたイベントを除く - これについては後で詳しく説明します) は、要素に直接バインドされます。その要素を置き換える場合 (これはまさに.replaceWith()関数を使用するときに行うことです)、要素と共にそのイベント ハンドラーを削除します。イベントが新しい要素にバインドされることはありません。

解決策は、前述のとおり、イベント委任です。一般的な原則は、動的要素を含む静的要素にイベント ハンドラーを設定することです。これは、イベントを処理し、イベントのターゲットが提供されたセレクターと一致する場合にコールバック関数を実行します。

jQuery 1.7 以降を使用している場合は、.on()関数を使用してこれを行うことができます。

$(document).on('click', 'div[class^=locked_]', function(e) {
    var newThis = $(this) ;
    $(this).load(url + " #" + $(this).attr("id"), function() {
        var loaded = $(this).children("#" + $(this).attr("id")) ;
        alert($(loaded).attr("class")) ; // displays "locked_true"
        $(newThis).replaceWith($(loaded)) ;
        alert($(newThis).html()) ;
    });
});

この例では使用documentしましたが、理想的には、より具体的な静的要素を使用することをお勧めします (動的要素に近いほど良い)。

jQuery 1.7 以降を使用していない場合は、関数を使用して同じ機能を取得できます。.delegate()構文は実質的に同じで、引数'click'と'div[class^=locked_]'引数を切り替えるだけです。

于 2012-08-07T14:37:06.527 に答える
3

replaceWith要素を DOM から削除し、別の要素に置き換えます。DOMから削除されたばかりの古いnewThis要素を参照しています。

于 2012-08-07T14:34:43.807 に答える