4lackof 4lackof - 4 months ago 46
jQuery Question

JS - Stop function above current function

I have a jQuery click event which adds a class (

active
) to a
dropdown
.
In the
dropdown
there are boxes (with the class generically called
box
).

Currently the jQuery event fires anytime you click anywhere in the
item
class, but if you click the
box
it also closes the dropdown. Thus I am adding an if statement above the
addClass
part which checks if you clicked a
box
.

Here's the html:

<div class="trainee-item">
<div class="dropdown">
<div class="box"></div>
</div>
</div>


and here's the JS:

$('.item').click(function(e) {
$('.box').click(function() {
console.log('stop!!!');
});

if ($(this).children('.dropdown').hasClass('active')) {
$(this).children('.dropdown').removeClass('active');
return;
}
$(this).children('.dropdown').addClass('active');
});


I've tried
return
(where the
console.log('stop!!!!');
currently is, but that only stops the
$('.box').click(function()
(the immediate "parent" function). I am trying to stop the function above that one

Any help? thanks

Answer

One way would be

$('.item').click(function(e){
    if (e.target.className=="box"){
         e.preventDefault()
         return
    }

})
Comments