1

.html（）および.on（）メソッドを使用してdivのコンテンツを置き換えた後、jQuery関数を呼び出す際に問題が発生します。多くのページにアクセスした後、問題の原因は.on（）メソッドの使用方法が間違っていることは確かですが、何が問題なのか理解できません。問題は、htmlコンテンツをロードした後にjQueryUIスライダーが機能しないことです。解決策は非常に簡単だと思いますが、同様の問題を抱えている人が何百人もいる間は、正しい答えを見つけることができません。

1つのdiv要素を本文として使用して、他のdiv要素のコンテンツを表示しています。

<body>

<a href="#" content="#div1">load content</a>

<div id="body">static content with working UI slider 
 <div class="slider"></div> 
</div> 

 <div id="div1">loaded content where the UI slider is not working
  <div class="slider"></div>
 </div>

</body>

このjQueryコードを使用して、htmlコンテンツ（およびスライダー）を動的にロードします

$(".slider").slider(); 

$("body").on("click", "a", function(event) {

event.preventDefault();

var htmlContent = $($(this).attr("content")).html();

$("div#body").html(htmlContent);


});

コードは次の場所にあります：http：//jsfiddle.net/zTRFj/1/

4

1 に答える 1

1

HTMLをシリアル化するため、古い要素はすべて破棄され、新しい場所に再構築されます。

.html()HTMLを文字列として取得するために呼び出す代わりに、を呼び出します.contents()。これにより、実際の要素が返され、バインドされたイベントと参照が保持されます。

$(".slider").slider(); 

$("body").on("click", "a", function(event) {
    event.preventDefault();

    var htmlContent = $( $(this).attr("content") ).contents();

    $("div#body").html(htmlContent);
});
于 2013-01-18T17:56:42.663 に答える