div内のInettutsが動作しません

Question

inettutsを使用してウィジェットフレームワークを作成し、asp.netおよびsqlserverでajaxを使用してデータベース機能を追加しました。ウィジェットはユーザーのデータベースデータに従って読み込まれますが、私は問題があります。ウィジェットを動かすと、その中のjavascriptが動作しません。ここに私のコードがあります、あなたはその問題が何と思いますか？

<script language="javascript" type="text/javascript"> 
jQuery(document).ready(function() { 
     jQuery(".c").hide(); 
jQuery("#widgetbodycontainer").click(function(e) { 
    console.log("clicked"); 
    // if user clicks on a .c element or a descendant of one 
    if (jQuery(e.target).hasClass("h") || jQuery(e.target).parents(".h").length) { 
     jQuery(e.target).next(".c").slideToggle(200); 
    } 
});​ 
}); 

</script> 
<div id="container"> 

<div id="widgetbodycontainer" > 

<div class="layer1"> 

<p class="h">Company </p> 
<div class="c"> 
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div> 
<p class="h">Person</p> 
<div class="c"> 
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></div> 
<p class="h">Result</p> 
<div class="c"></div> 
</div> 

</div> 
</div> 

Answer 1

おそらくあなたのアヤックス行動は、要素を交換する直接それらに関連付けられている任意のイベントハンドラを破壊しているため。本質的には、 "スマート"ハンドラを適切な親コンテナに結び付けることを意味するevent delegationを使用する必要があります。試してみてください：

// as of jQuery 1.7 
jQuery("#widgetbodycontainer").on("click", ".h", function() { 
    jQuery(this).next(".c").slideToggle(200); 
}); 

• http://api.jquery.com/on/

EDIT：あなたはjQueryのの先史時代のリリースを使用しているので、あなたがイベントの委任に古い学校の方法を行う必要があるでしょう：

jQuery("#widgetbodycontainer").click(function(e) { 
    console.log("clicked"); 
    // if user clicks on a .c element or a descendant of one 
    if (jQuery(e.target).hasClass("h") || jQuery(e.target).parents(".h").length) { 
     jQuery(e.target).next(".c").slideToggle(200); 
    } 
});​ 

Demo.