There is html that is generated automatically and is given to me as it is:

<li class="test1" title="title1-gen"> <span class="inner-class"data="0">×</span>Select1 </li>

I try to make it so that by clicking on Select1 , I have one function executed, and by clicking on × , the other is executed, respectively.

I tried the easiest option:

 $('.test1[title="title1-gen"]').on('click', function() { $('.inner-class').on('click', function() { alert('NO'); return; }); alert('YES'); });

But clicking on the cross still shows YES . I tried to make $('.inner-class') separately, change the data and check it, but YES is still called. Is it even possible to crank like

    2 answers 2

    You add an extra click event handler for the inner element to each click on <li> , which is fundamentally wrong

    You can make two event handlers:

     $('.test1[title="title1-gen"]').on('click', function() { alert('YES'); }); $('.test1[title="title1-gen"] .inner-class').on('click', function() { alert('NO'); return false; }); 
     <li class="test1" title="title1-gen"> <span class="inner-class"data="0">×</span>Select1 </li> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    The key point here is that when you click on the .inner-class you need to block the ascent of the event (for example, using return false ) so that the handler of the parent element is not called

    In principle, it is possible to do with one event handler, figuring out by event.target what exactly was pressed, but I don’t see any particular advantages in this approach:

     $('.test1[title="title1-gen"]').on('click', function(event) { if (event.target.classList.contains("inner-class")) { alert('NO'); } else { alert('YES'); } }); 
     <li class="test1" title="title1-gen"> <span class="inner-class"data="0">×</span>Select1 </li> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    • Cool! Thank you so much - dijetol

    Usually in such matters the solution lies in prohibiting the “ascent” of the click event. In your markup, you are trying to hang handlers on elements, one of which is a descendant of the second.
    As a result, when you click on a child element, its click is first processed, and then the event “pops up” up the DOM tree. To prevent the top handler from being called, it is necessary to prevent the ascent using stopPropagation() .

    In addition, in your code, the click handler on the cross is hung inside the select handler, which causes the simple click on the cross to not work until the select itself is clicked.

     $(".test1").click(function(){ console.log('select'); }); $(".inner-class").click(function(e){ e.stopPropagation(); console.log('x'); }); 
     .inner-class { margin-right: 10px; font-weight: bold; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="test1" title="title1-gen"> <span class="inner-class"data="0">×</span>Select1 </li>

    • The fact that the click on the cross begins to work only after a click on the select is still half the problem. That's when the processors of clicking on the cross becomes a dozen and more - the “most fun” begins - Regent