如何調用兩個'點擊'事件

Question

我有一個區的列表以及相應的Taluks。當我點擊一個地區時，它將在JQX餅圖中顯示地區報告。但是當我點擊Taluks時，它會顯示地區報告，有時還會顯示Taluk報告。目前，我正在使用此點擊事件。

$(function() { 

    $("#menuwrapper ul>li").click(function() { 

     var districtname = this.id; 
     GetDistrictReport(districtname); 
     showresults(districtname); 
     //alert('Clicked list. ' + a); 
    }); 
}); 
$(function() { 

    $("#menuwrapper ul>li>ul>li").click(function() { 
     //var districtname = this.id; 
     var talukname = this.id; 
     GetTalukReport(talukname); 
     showTalukresults(talukname); 
     //alert('Clicked list. ' + a); 
    }); 

}); 

該菜單包裝id從

<div class="ui-layout-east" style="background-color: #bccbde"> 

      <div> 
       <div style="width: 25%; position: absolute; top: 0px; left: 0px; z-index: 1000"> 

        <ul id="menuwrapper" style="position: absolute; top:-10px; left:-40px;"> 

         <%--<li>--%> 
         <%--<a href="#">Districts</a>--%> 
         <ul> 
          <li id="Bagalkot"><a href="#">Bagalkot</a> 
           <ul> 
            <li id="Badami"><a href="#">Badami</a></li> 
            <li id="Bagalkot"><a href="#">Bagalkot</a></li> 
            <li id="Bilgi"><a href="#">Bilgi</a></li> 
            <li id="Hungund"><a href="#">Hungund</a></li> 
            <li id="Jamkhandi"><a href="#">Jamkhandi</a></li> 
            <li id="Mudhol"><a href="#">Mudhol</a></li> 
           </ul> 

          </li> 
          <li id="Bangalore"><a href="#">Bangalore</a> 
           <ul> 
            <li id="Anekal"><a href="#">Anekal</a></li> 
            <li id="Bangalore East"><a href="#">Bangalore East</a></li> 
            <li id="Bangalore North"><a href="#">Bangalore North</a></li> 
            <li id="Bangalore South"><a href="#">Bangalore South</a></li> 
           </ul> 

          </li> 

          <li id="Bangalore Rural"><a href="#">Bangalore Rural</a> 
           <ul> 
            <li id="Devanahalli"><a href="#">Devanahalli</a></li> 
            <li id="Dod Ballapur"><a href="#">Dod Ballapur</a></li> 
            <li id="Hosakote"><a href="#">Hosakote</a></li> 
            <li id="Nelamangala"><a href="#">Nelamangala</a></li> 
           </ul> 
          </li> 

          <li id="Belgaum"><a href="#">Belgaum</a> 
           <ul> 
            <li id="Athni"><a href="#">Athni</a></li> 
            <li id="Belgaum"><a href="#">Belgaum</a></li> 
            <li id="Chikodi"><a href="#">Chikodi</a></li> 
            <li id="Gokak"><a href="#">Gokak</a></li> 
            <li id="Hukeri"><a href="#">Hukeri</a></li> 
            <li id="Khanapur"><a href="#">Khanapur</a></li> 
            <li id="Parasgad"><a href="#">Parasgad</a></li> 
            <li id="Ramdurg"><a href="#">Ramdurg</a></li> 
            <li id="Raybag"><a href="#">Raybag</a></li> 
            <li id="Sampgaon"><a href="#">Sampgaon</a></li> 
           </ul> 
          </li> 

Answer 1

此行爲是因爲事件傳播，從孩子到家長造成的。當你點擊District的li時，它會工作的很好，但是當你點擊Taluk的li時會顯示奇怪的行爲（因爲Taluk的li是該區的li的孩子，並且該事件從Taluk的li傳播到區的li並觸發它）。

因此，您應該使用event.stopPropagation（）;

$("#menuwrapper").find("ul>li>ul>li").click(function (event) { 
    if (event.stopPropagation === "function") { event.stopPropagation(); } 
    var talukname = this.id; 
    GetTalukReport(talukname); 
    showTalukresults(talukname); 
});