Asp.Net 웹 사용자 컨트롤의 JQuery 스크립트가 한 번 이상 실행됩니다.

Question

웹 사용자 컨트롤에 일부 JavaScript가 있고 페이지에 해당 컨트롤의 인스턴스 두 개를 인스턴스화합니다. 컨트롤은 도움말 텍스트를 표시하기 만하면 열거 나 닫을 수 있도록 토글해야합니다.

document.ready 함수는 두 번 실행된다는 예상대로 작동합니다. 그러나 두 컨트롤 중 하나를 클릭하면 스크립트가 두 번 실행되므로 컨트롤이 열립니다.

클릭 한 컨트롤에 대해 스크립트가 한 번만 실행되도록하려면 어떻게해야합니까? (@UmairP에 의해 지적)

<div class="helpControlHolder"> 
    <div class="expandableHeading">Show (Hide) </div> 
    <div class="expandableContent commentsTable" > 
     <ul id="ulComments" runat="server"></ul> 
    </div> 
</div> 

<script type="text/javascript"> 
    function slideToggle(e, ui) { 
      debugger; 
      //find the right control to slideToggle 
      var ct = e.currentTarget; 
      var controlHolder = ct.parentNode; //up the dom one element 
      $(controlHolder).find(".expandableContent").slideToggle(500); //back down the dom to the element we want to animate 

    } 

    $(document).ready(function() { 
     //find the right control to hide 
     var pare = $('.helpControlHolder'); 
     pare.find(".expandableContent").hide(); 

     pare.find(".expandableHeading").click(function (e, ui) { 
      e.preventDefault(); 
      slideToggle(e, ui); 
     }); 
    }); 
</script> 

Answer 1

Try to change your javascript as follows: 

<script type="text/javascript"> 
    function slideToggle(e, ui) { 
      debugger; 
      //find the right control to slideToggle 
      var ct = e.currentTarget; 
      var controlHolder = ct.parentNode; //up the dom one element 
      $(controlHolder).find(".expandableContent").slideToggle(500); //back down the dom to the element we want to animate 

    } 

    $(document).ready(function() { 
     //find the right control to hide 
     var pare = $('.helpControlHolder'); 
     pare.find(".expandableContent").hide(); 


    }); 
    $(function(){ 
    $(".expandableHeading").click(function (e, ui) { 
      e.preventDefault(); 
      slideToggle(e, ui); 
    }); 
    }); 
</script> 


Hope it helps. 

Answer 2

문제는 스크립트가 페이지에 두 번 추가되는 하였다. 나는 별도의 파일 (helpControl.js)에 스크립트를 이동 한 후 나는 사용 된 마스터 페이지의 사이트 스크립트 구역에 다음 항목을 추가 :

<%--Site Scripts--%> 
<asp:ScriptReference Path="~/Scripts/C/helpControl.js" /> 

이는 한 번만 추가됩니다 의미 예상대로 실행 . 답변에 대한

감사