Tell me how it would be better to process such requests here:

$('.class1').on('click', function(e){ if ((e.target != undefined) && (e.target.parentNode != undefined) && (e.target.parentNode.className != 'class2')) return; // тут остальной код }

those. not to do such nested checks.

As an option, you can always write your own function, which accepts a string as input, parses it and further checks the object in stages

 if ((myValidate(e, 'target.parentNode.className') == true) && (e.target.parentNode.className != 'class2'){...}

but can there be standard tools, at least in the same jQuery?

    2 answers 2

    Specifically, your code corresponds to such

     jQuery(function($) { $('.class1').on('click', 'div', function(e) { console.log($(this).text()); if (!$(this).parent().hasClass('class2')) return; // тут остальной код }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="class1 class2"> <div>Div1</div> <div>Div2</div> <div>Div3</div> </div>

    A bit of decryption. In jQuery, the element at which the event occurred is passed to the handler as this . This is cross-browser, unlike e.target and it cannot be absent.

    $(this).parent() returns a jQuery set from the parent of this element. If there is no parent, then the set is empty, but the set itself exists

    .hasClass('class2') determines whether at least one element in the set has class2 . Accordingly, if the set is empty, the answer is false

    Or you can do without checks. Immediately attach the handler to the desired items.

     jQuery(function($) { $('.class1').on('click', '.class2 > *', function(e) { // Цепляем обработчик на всех непосредственных потомков // элемента с классом class2 console.log($(this).text()); }); $('button').click(function() { $('.class1').append('<div class="class2"><div>Div0_1</div><div>Div0_2</div><div>Div0_3</div></div>'); }) }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="class1"> <div class="class2"> <div>Div2_1</div> <div>Div2_2</div> <div>Div2_3</div> </div> <div class="class3"> <div>Div3_1</div> <div>Div3_2</div> <div>Div3_3</div> </div> </div> <button>Add</button>

    • I came up with the idea of ​​avoiding direct access to the data, the fact is that e.target allows you to determine exactly what I clicked and the parent I get from this element, and in the above code the parent is obtained from the element (for example, body on which I catch pressing). It seemed to me more expedient to catch clicks on one element than to add a hundred handlers on children (or rather not just children, but children of children :)) - Zhihar
    • Now I have done such a working code: $(e.target).parent().hasClass('class2') but again there is an e.target which also has to be converted via $ , but the code has become more convenient and understandable - Zhihar
    • @Zhihar so add the necessary selector to on and get those elements clicked on (see the updated answer) - Anton Shchyrov
    • I didn’t quite understand, say if I have a <div class = 'main'><div class = 'parent'><div class = 'child'> and I catch clicks on a child I just need to specify the right selector $('.main').on('click', '.child', function(e){}) (I catch on the main, since the children can still be created / deleted in the process and cannot be explicitly attached to them, and there are a lot of them) - Zhihar
    • @Zhihar Exactly. Once again, the handler is created one on div.main , and called when you click on .child . And the call to the handler does not depend on the presence or absence of the element at the time of the creation of the handler itself (see the second updated answer) - Anton Shchyrov

    You can shorten it a bit:

     $('.class1').on('click', function(e){ if (e && e.target && e.target.parentNode && e.target.parentNode.className != 'class2') return; // тут остальной код }

    We are waiting for the elvis operator with impatience