[英]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: 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: 我的jq是:
$('#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 我还尝试检查btnResizeClick函数中单击了哪个元素,如果它是“删除”按钮,则返回false,但是被单击的元素仍然是面板标题
Any suggestions? 有什么建议么?
Bind a click event on the children and use e.stopPropagation()
to block the parent click event. 在子项上绑定单击事件,然后使用
e.stopPropagation()
阻止父项单击事件。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.