Inettuts in javascript div가 움직일 때

Question

inettuts를 사용하여 위젯 프레임 워크를 만들고 asp.net 및 sqlserver에서 ajax와 함께 일부 데이터베이스 기능을 추가했습니다. 위젯은 사용자의 데이터베이스 데이터에 따라로드되지만 문제가 발생합니다. 위젯을 이동하면 자바 스크립트가 작동하지 않습니다. 여기에 제 코드가 있습니다. 당신은 문제가 무엇이라고 생각합니까?

<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

아마 ajax 동작이 요소를 대체하고 직접 연결된 이벤트 처리기를 파괴하기 때문입니다. 본질적으로 적절한 부모 컨테이너에 "스마트"처리기를 묶는 것을 의미하는 event delegation을 사용해야합니다. 시도 :

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

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

편집 :

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); 
    } 
});​ 

: 당신이 jQuery를의 선사 시대 릴리스를 사용하고 있기 때문에, 당신은 이벤트 위임에게 구식 방법을해야 할 것이다

Demo.