load（）を実行した後でJqueryリスナーが機能しない

Question

私は、MySQLクエリのページ番号付けされた結果を含むDIVを持っています。

クリックしたページ番号に基づいてDIVの内容を変更するために.load（）関数を使用しようとしていました。

他のイベントリスナーが正しく動作しなくなったことを除いて、機能は完璧に機能しました。クエリの結果では、親ページが決して変更されず、コンテンツのIDと名前が同じであっても、ページ1から移動した後は、動作を停止したさまざまなボタンなどをクリックするためのリスナーが複数存在しました。

これは私が使用していたjqueryです。

$('input[name="pagenumbutton"]').click(function(){ 
    var thispagenum = this.value; 
    var thispagestart = (thispagenum - 1) * 10; 
    $("#result").load("querydb.php", "thispagestart="+thispagestart); 
}); 

pagenumbuttonという名前の入力をクリックすると、結果のdivコンテンツが更新されますが、その後のjqueryは起動しなくなります。私は、静的ページを変更し、全体のインデックスページをリロードするが、私はに.LOAD（）関数を使用する場合だけでなく、div要素をリロードする場合

$('img[name="appdetailimg"]').click(function(){ 
    var appName = $(this).parent().parent().children().get(0).textContent; 
    var appDetail = $(this).parent().children().get(1).value; 

    document.getElementById('detaildivtd').textContent = appName + " : DETAIL"; 
    document.getElementById('detailtext').value = appDetail; 

    $("div#fuzz").fadeIn(); 
    $("div#detaildiv").center(); 
    $("div#detaildiv").show(); 
}); 

すべてが完全に正常に動作します。

これは期待される動作ですか.load（）関数か何か不足していますか？

Answer 1

イベントハンドラは、特定要素に適用され、それらに適用されます。同じ要素であっても要素が置き換えられると、ハンドラは存在しなくなります。

jQueryのlive、delegate、及びonでこれを解決し、前二者を後者で廃止されています。

あなたがonを使用してハンドラを適用する場合、子要素が変更されているとして、それをトリガすることができますので、あなたは、変更されません。親要素にアタッチ：

$('#result').on('click','img[name="appdetailimg"]', function(){ 
    ... 
} 

Answer 2

これは予想される動作です。 'クリック'イベントは、この呼び出しで現在アクセス可能な要素にバインドされています。したがって、 'click'イベントがバインドされた後にページに追加するものはすべてバインドされません。

「live」、「delegate」、「on」をご覧ください。

// change to "live" and bind the "click" event 
// "click" event will bind to all selected elements in the future 
$('img[name="appdetailimg"]').live('click', function(){ 
    var appName = $(this).parent().parent().children().get(0).textContent; 
    var appDetail = $(this).parent().children().get(1).value; 

    document.getElementById('detaildivtd').textContent = appName + " : DETAIL"; 
    document.getElementById('detailtext').value = appDetail; 

    $("div#fuzz").fadeIn(); 
    $("div#detaildiv").center(); 
    $("div#detaildiv").show(); 
}); 

Answer 3

は、それはそれは、負荷を行うには何も持っていない

確かに過剰だ... .live()それは非推奨だを使用し、全体のDOMを見てはいけない、それはあなたのものとあなたのイベントバインディング試合に関係していますload（）でやり直してください。

クリック機能は、JavaScriptが呼び出されたときにDOMで使用できる要素にバインドされています。

代わりにこれを試してみてください：

$('.wrapper').delegate('input[name="pagenumbutton"]', 'click', function(){ 
     var thispagenum = this.value; 
     var thispagestart = (thispagenum - 1) * 10; 
     $("#result").load("querydb.php", "thispagestart="+thispagestart); 
    }); 
    $('.wrapper').delegate('img[name="appdetailimg"]', "click", function(){ 
     var appName = $(this).parent().parent().children().get(0).textContent; 
     var appDetail = $(this).parent().children().get(1).value; 

     document.getElementById('detaildivtd').textContent = appName + " : DETAIL"; 
     document.getElementById('detailtext').value = appDetail; 

     $("div#fuzz").fadeIn(); 
     $("div#detaildiv").center(); 
     $("div#detaildiv").show(); 
    }); 

Answer 4

私が想定しているリロードする地域における第二のコードブロック参照要素。 clickが行わ接続すると、レンダリングされたelemetesに

$('body').on('img[name="appdetailimg"]', 'click', function(){ 
    var appName = $(this).parent().parent().children().get(0).textContent; 
    var appDetail = $(this).parent().children().get(1).value; 

    document.getElementById('detaildivtd').textContent = appName + " : DETAIL"; 
    document.getElementById('detailtext').value = appDetail; 

    $("div#fuzz").fadeIn(); 
    $("div#detaildiv").center(); 
    $("div#detaildiv").show(); 
}); 

Answer 5

clickのみ攻撃機能：その場合は、「デリゲート」を（自分の要素のための静的なコンテナと「体」を置き換える）を使用します。

はあなたのjQueryのバージョンに基づいて、delegate機能\ live \ jQueryのonを使用する必要があります。

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

onバージョン：

$('body').on('click', 'img[name="appdetailimg]', function(){ 
     var appName = $(this).parent().parent().children().get(0).textContent; 
     var appDetail = $(this).parent().children().get(1).value; 

     document.getElementById('detaildivtd').textContent = appName + " : DETAIL"; 
     document.getElementById('detailtext').value = appDetail; 

     $("div#fuzz").fadeIn(); 
     $("div#detaildiv").center(); 
     $("div#detaildiv").show(); 
    }); 

Answer 6

@swatkinsは右の使用である：

素晴らしいと迅速な応答のための

$('body').delegate('img[name="appdetailimg"]', 'click', function(){.....}