jQuery .load（）を使用すると、実際にページに表示される結果と少し異なる結果が返されます

Question

まず、ボタンをスキニングするためにjQuery UIを使用しています。ボタンがあるフォームがあります。このフォームはさまざまな量のチェックボックスで構成されています。チェックボックスを消してしまえば、ボタンのメソッドの1つは、チェックボックスの削除が成功すると、ページをリフレッシュせずにチェックボックスの新しいセットを​​にすることです。

$('#zoneRemove').live('click',function() { 
     $.post('php/zoneNotifUnsub.php', $('#zoneNotifUnsub').serialize(), function(){ 
      $('#zoneDiv').load('notifications.php #zoneDiv'); 
     }); 
    }); 

それは素晴らしい作品：

は、ここでは、コードです。唯一の問題は、#zoneDivがリロードされたときに、私のボタンがスキンされていないため、別の結果を返すように見えるということです（ボタンがdiv内にあり、外側に配置すると全体が機能しなくなります）。これは、通常、JSの構文エラーの症状です（スクリプトのエラーが発生すると、ボタンのスキニングが失敗するため、これはデバッグ用の半有用なバグ/機能です）。しかし、私は明らかにJSコードを変更しません。変更される唯一のものは、#zoneDivに含まれるPHPの出力です。

助けが必要ですか？

Answer 1

これは、ボタンがJQuery UIによって動的に変更されているためです。あなたは、ページの読み込みでそのdivの上で行うどのようなスタイリング

$('#zoneDiv').load('notifications.php #zoneDiv', function(){$(this).find('.button').button();}); 

、あなたは再びそれをしなければならない：ちょうど（あなたは何が必要関数に.buttonを変更することができます）そのdiv要素内の要素に再び.button()を実行します。

Answer 2

「#zoneDiv」を再読み込みするたびに再実行する必要があるページが読み込まれたときに、javascriptを使用してスタイリングを行っていますか？

Answer 3

マークアップではなくコードでボタンをスキンしているため（たとえば、jQuery UIのButtonのものを呼び出すなど）、新しいコンテンツには自動的に適用されません。ボタンインスタンスを検出し、それらにスキンを適用するために使用するコードを再実行する必要があります。

は例えば、コードを発射するloadコールバックを使用してください：

$('#zoneRemove').live('click',function() { 
    $.post('php/zoneNotifUnsub.php', $('#zoneNotifUnsub').serialize(), function(){ 
     $('#zoneDiv').load('notifications.php #zoneDiv', function() { 
      // This is the callback; make all checkboxes in the content "buttons" 
      $(this).find(":checkbox").button(); 
     }); 
    }); 
}); 

...または類似。

Answer 4

$('mybutton').button()を使用してボタンをスキンしていますか？そうであれば、ボタンを押したボタンがなくなり、もう一度呼び出す必要があります。 button()は公開されていません。

ので、これを試してみてください。

$('#zoneDiv').load('notifications.php #zoneDiv', function(){ 
    $('mybutton').button(); 
}); 

Answer 5

問題は、あなたの最初の段落で述べているように見える：I'm using jQuery UI for skinning my buttons。ボタンをスキンするために何をしているのかは、新たにロードされたコンテンツにも行う必要があります。つまり、あなたがpageloadにこのような何かをやっている場合：

$(function() { 
    ... 
    $('#zoneDiv button.my-button').button(); 
    ... 
}); 

続いたときに、新しい #zoneDiv負荷、以前にもうないだろうそれらに適用されるボタンの機能を持っていたDOM要素のすべて。だから、このようなことをしなければならないでしょう。コールバックをload（）関数に追加してください。新しいコンテンツがDOMに滞留した直後にこれが発生します。

$('#zoneDiv').load('notifications.php #zoneDiv', function(){ 
    $('#zoneDiv button.my-button').button(); 
});