JQuery单击函数不在父元素内的按钮上工作，它具有自己的单击功能

Question

我有一个按钮，点击时需要运行一个javascript函数。

问题是这个按钮位于另一个拥有它自己的点击功能的元素中，这似乎阻止了按钮的运行。

这是代码：

         <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>

这是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...
});

我有一种感觉，可能是因为代码的stopPropagation部分。

有任何想法吗？

Answer 1

我有一种感觉，可能是因为代码的stopPropagation部分。

正确，结合您使用live钩住按钮点击的事实。 如果你直接连接它，按钮将首先获得事件。 但是因为你已经使用了live ，所以按钮点击事件不会被触发，除非点击一直到达document ，因为这就是live工作原理：它在文档级挂钩事件然后，当event到达它，它会查看您使用的选择器是否与实际单击的元素或其任何祖先相匹配。 在你的情况下，它实际上永远不会到达那里，因为它一路走过#login元素，它通过stopPropagation停止事件冒泡。

因此，要使其工作，您需要正常挂钩按钮而不是使用live 。 从你的结构来看，似乎没有立即使用live任何理由（当然，总有可能你有没有向我们展示的东西）。 如果您在附加了所有#login点击处理程序后动态添加按钮，则在添加时必须将其挂钩。

Answer 2

live函数将处理程序附加到document元素并等待事件传播。 你认为阻止事件传播正在阻止调用处理程序是正确的。 您可以使用delegate方法解决此问题（类似于实时，但使用指定的父元素而不是document ）：

$('#login, #login > span').delegate("#forgotten", "click", function() {
  // ... Run function here...
});

或者在jQuery 1.7+中on可以使用on方法：

$('#login, #login > span').on("click", "#forgotten", function() {
  // ... Run function here...
});

Answer 3

使用delegate（）（ http://api.jquery.com/delegate/ ）或on（）（仅限jQuery> 1.7）（ http://api.jquery.com/on/ ）将挂钩附加到子节点你要。 Delegate / On不会冒泡/传播。