CODEWITHSUNDEEP
javascriptjqueryevents
peter.cambal
peter.cambal

Reputation: 522

Remove specific event handler from child of element

In my application I want to resize a window when user clicks on panel-heading, but that heading contains a child element- button which has another event handler binded on. What I need to do is, when user click on that button, no resize function will be called. I tried many variations, but none of them worked.

HTML:

<div class="panel-heading" style="cursor:pointer">
   <div class="pull-right">
       <button type="button" class="btn btn-danger btn-xs" id="btn-subject-remove"><span class="glyphicon glyphicon-remove"></span> Remove</button>
   </div>
</div>

And my jq is:

$('#btn-subject-remove').on('click',btnRemoveSubjectsClick);
$('#subscribers-row .panel-heading').on('click',btnResizeClick);

What I have tried, but none of them worked:

 $('#subscribers-row .panel-heading').off('click','#btn-subject-remove',btnResizeClick);
 $('#btn-subject-remove').off('click',btnResizeClick);
 $('#subscribers-row .panel-heading').on('click',btnResizeClick).children().click(function(e){return false});

I also tried checking in btnResizeClick function what element was clicked, and if it was remove button then return false, but the clicked element is still panel-heading

Any suggestions?

Upvotes: 0

Views: 168

Answers (1)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Bind a click event on the children and use e.stopPropagation() to block the parent click event.

In a simple example:

$(function() {
    $('div').on('click', function() {
        $(this).toggleClass('redBg');
    });
    $('div>*').on('click', function(e) {
        e.stopPropagation();
    });
});
div {
    background: green;
    width: 200px;
    height: 200px;
}
span {
    display: block;
    height: 50px;
    background: yellow;
}
.redBg {
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    With some text
    <span> in a span </span>
</div>

Upvotes: 1

Related Questions