[英]JQuery click function not working on button within parent element which has it's own click function
I have a button which needs to run a javascript function when clicked. 我有一个按钮,点击时需要运行一个javascript函数。
The problem is that this button lives within another element which has it's own click function which seems to be preventing that of the button from running. 问题是这个按钮位于另一个拥有它自己的点击功能的元素中,这似乎阻止了按钮的运行。
Here's the code: 这是代码:
<a id="login">Login
<span>
<span style="display:block; padding:0 0 5px 0;">
content here...
</span>
<input type="button" id="forgotten" value="test" />
</span>
</a>
And here's the javascript: 这是javascript:
$("#login").click( function() {
$("#login > span").slideDown();
});
$('body').click( function() {
if ($("#login > span:visible")) {
$("#login > span").slideUp();
}
});
$('#login, #login > span').click( function(event){
event.stopPropagation();
});
$("#forgotten").live("click", function() {
// ... Run function here...
});
I have a feeling it might be because of the stopPropagation part of the code. 我有一种感觉,可能是因为代码的stopPropagation部分。
Any ideas? 有任何想法吗?
I have a feeling it might be because of the stopPropagation part of the code.
我有一种感觉,可能是因为代码的stopPropagation部分。
Correct, combined with the fact you're using live
to hook the click of the button. 正确,结合您使用
live
钩住按钮点击的事实。 If you hooked it up directly, the button would get the event first. 如果你直接连接它,按钮将首先获得事件。 But because you've used
live
, the button click event doesn't get fired until/unless the click reaches all the way up to the document
, because that's how live
works: It hooks the event at the document level and then, when the event reaches it, it looks to see if the selector you've used matches the element that was actually clicked or any of its ancestors. 但是因为你已经使用了
live
,所以按钮点击事件不会被触发,除非点击一直到达document
,因为这就是live
工作原理:它在文档级挂钩事件然后,当event到达它,它会查看您使用的选择器是否与实际单击的元素或其任何祖先相匹配。 In your case, it never actually gets there, because along the way it travels through the #login
element, which stops the event bubbling any further with stopPropagation
. 在你的情况下,它实际上永远不会到达那里,因为它一路走过
#login
元素,它通过stopPropagation
停止事件冒泡。
So to make this work, you'll need to hook the button it up normally instead of using live
. 因此,要使其工作,您需要正常挂钩按钮而不是使用
live
。 From your structure, there doesn't immediately seem to be any reason for using live
anyway (though of course it's always possible there's something you haven't shown us). 从你的结构来看,似乎没有立即使用
live
任何理由(当然,总有可能你有没有向我们展示的东西)。 If you're adding the button dynamically after all of the #login
click handlers are attached, you'll have to hook it when you add it. 如果您在附加了所有
#login
点击处理程序后动态添加按钮,则在添加时必须将其挂钩。
The live
function attaches the handler to the document
element and waits for the event to propagate. live
函数将处理程序附加到document
元素并等待事件传播。 You are correct in thinking that preventing the event from propagating is preventing the handler being called. 你认为阻止事件传播正在阻止调用处理程序是正确的。 You can work around this using the
delegate
method (similar to live, but with specified parent elements rather than document
): 您可以使用
delegate
方法解决此问题(类似于实时,但使用指定的父元素而不是document
):
$('#login, #login > span').delegate("#forgotten", "click", function() {
// ... Run function here...
});
Or in jQuery 1.7+ the on
method can be used: 或者在jQuery 1.7+中
on
可以使用on
方法:
$('#login, #login > span').on("click", "#forgotten", function() {
// ... Run function here...
});
Use delegate() ( http://api.jquery.com/delegate/ ) or on() (only with jQuery > 1.7) ( http://api.jquery.com/on/ ) to attach the hook to the child you want. 使用delegate()( http://api.jquery.com/delegate/ )或on()(仅限jQuery> 1.7)( http://api.jquery.com/on/ )将挂钩附加到子节点你要。 Delegate / On do not bubble / propagate.
Delegate / On不会冒泡/传播。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.