There are two blocks. It is necessary that when clicking on block No. 2, the action of clicking on block No. 1 did not work.

$(document).ready(function(){ $(document).on('click', '.b_1', function(event){ var target = $(event.currentTarget); target.css({ color: 'white' }); }); }); $(document).ready(function(){ $(document).on('click', '.b_2', function(event){ var target = $(event.currentTarget); target.css({ color: 'white' }); }); }); 
 .b_1, .b_2 { height: 40px; color: black; } .b_1 { width: 200px; background-color: blue; } .b_2 { width: 40px; background-color: red; float: right; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='b_1'>1 <div class='b_2'>2</div> </div>

Example

    2 answers 2

    add .stopPropagation() call

     $(document).ready(function(){ $(document).on('click', '.b_1', function(event){ var target = $(event.currentTarget); target.css({ color: 'white' }); }); }); $(document).ready(function(){ $(document).on('click', '.b_2', function(event){ //Чтобы событие не всплывало в объемлющий div event.stopPropagation(); var target = $(event.currentTarget); target.css({ color: 'white' }); }); }); 
     .b_1, .b_2 { height: 40px; color: black; } .b_1 { width: 200px; background-color: blue; } .b_2 { width: 40px; background-color: red; float: right; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='b_1'>1 <div class='b_2'>2</div> </div>

    • Thank! Option working for an example! I understand my code, it does not work for me. Perhaps because block 1 is a <a> - Torawhite tag
    • so it was necessary to ask a question like that :) and the behavior of the tag should not change - Sublihim
    • You are right, does not change. But my click on the link expands the list, and on clicking on the block, a tooltip pops up. The list is still revealed when you click on the hint ( - Torawhite
    • and expanding the list exactly on onclick? - Sublihim
    • Yes, but the script code that opens the list was not written by himself, it only made necessary additions to it. Attached script to external - jsfiddle.net/wk6v0o4e/3 - Torawhite

    At the end of the click function of block # 2, add event.stopPropagation ();

     $(document).ready(function(){ $(document).on('click', '.b_2', function(event){ var target = $(event.currentTarget); target.css({ color: 'white' }); event.stopPropagation(); }); });
    • Thank! In the example it works, but for some reason I don’t have it in the code ... I can not understand why. The only difference is that in my code the first block is the <a> - Torawhite tag