如何调用两个'点击'事件

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