jquery नेस्टेड ली क्लिक इवेंट कई बार कॉल करता है

Question

मेरे पास निम्न संरचना है।

<ul id="browser" class="filetree"> 

     <li><span class="folder">Folder 1</span> 

      <ul> 

       <li><span class="file">Item 1.1</span></li> 

      </ul> 

     </li> 

     <li><span class="folder">Folder 2</span> 

      <ul> 

       <li><span class="folder">Subfolder 2.1</span> 

        <ul id="folder21"> 

         <li><span class="file">File 2.1.1</span></li> 

         <li><span class="file">File 2.1.2</span></li> 

        </ul> 

       </li> 

       <li><span class="file">File 2.2</span></li> 

      </ul> 

     </li> 

     <li class="closed"><span class="folder">Folder 3 (closed at start)</span> 

      <ul> 

       <li><span class="file">File 3.1</span></li> 

      </ul> 

     </li> 

     <li><span class="file">File 4</span></li> 

    </ul> 

जेएस में मेरे पास निम्न कार्य है।

$("#browser li").click(function(){ 


}); 

जब मैंने ली फ़ाइल 2.1.1 पर क्लिक किया। समारोह ली फ़ाइल 2.1.1, ली सबफ़ोल्डर 2.1 और ली फ़ोल्डर के लिए तीसरी बार के लिए दूसरी बार के लिए 3 बार

पहली बार कॉल 2.

किसी को भी मेरे समाधान समारोह ठीक एक बार कॉल करने के लिए दे सकते हैं?

आपका सहायता बहुत appriciated है। धन्यवाद।

Answer 1

ऐसा इसलिए है क्योंकि आपके पास li#broswer के तहत तत्व हैं।

ऐसा करें:

$("#browser>li").click(function(){ 
    //only direct children of #browser 
    //your code 
}); 

या आप उपयोग कर सकते हैं event.stopPropagation():

$("#browser li").click(function(event){ 
    event.stopPropagation(); 
    //your code 
}); 

Answer 2

इस तरह

$("#browser li").click(function(event){ 
    event.stopPropagation(); 
    //do your other stuff 

}); 

करने के लिए अपने समारोह बदलें, निचले स्तर li पर क्लिक उच्च स्तर li पर "बबल अप" नहीं होगा।

Answer 3

इस तथ्य की घटनाओं की वजह से है "बुलबुला" अपने डोम, ताकि आप आप क्लिक

फ़ाइल 2.1.1, यह भी फ़ाइल 2.1 द्वारा सुना दिया जाएगा और 2 फ़ाइल

के लिए यह परिवर्तन घटना ठीक करने के लिए करता है, तो

$("#browser li").click(function(e){ 
    //Your code here 
    e.stopPropagation(); 
}); 

Answer 4

ली ऑब्जेक्ट पर क्लिक ईवेंट का उपयोग करने के बजाय अन्य तत्व जोड़ें (उदाहरण के लिए अवधि) और उस पर क्लिक करें। इस तरह से उच्च घटनाओं के लिए अभी भी बबल कर सकते हैं बस नेस्टेड ली के माध्यम से बुलबुला नहीं है।

//Run the following to see the no li bubble result 
 

 
$(".nobubble").on('click',function(){ 
 
    $("#result").append($(this).attr("data-id") +"<br />") 
 
    }); 
 

 
//uncomment the following to see the li bubble result 
 
/*$(".bubble").on('click',function(){ 
 
    $("#result").append($(this).attr("data-id") +"<br />") 
 
    });*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="bubble" data-id="li-a"><span class="nobubble" data-id="span-a">a</span> 
 
    <ul> 
 
     <li class="bubble" data-id="li-b"><span class="nobubble" data-id="span-b">b</span> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 

 
<div id="result"> 
 
</div>

अपने सही