JQuery单击功能不适用于具有自己的单击功能的父元素中的按钮答案

【问题标题】：JQuery click function not working on button within parent element which has it's own click functionJQuery单击功能不适用于具有自己的单击功能的父元素中的按钮
【发布时间】：2012-01-24 22:41:55
【问题描述】：

我有一个按钮，点击后需要运行 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 部分。

有什么想法吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

我感觉可能是因为代码的 stopPropagation 部分。

正确，再加上您使用live 来钩住按钮的点击这一事实。如果您直接连接它，按钮将首先获取事件。但是因为您使用了live，所以按钮单击事件不会被触发，直到/除非单击一直到达document，因为这就是live 的工作原理：它将事件挂钩到文档level 然后，当事件到达它时，它会查看您使用的选择器是否与实际单击的元素或其任何祖先相匹配。在您的情况下，它实际上永远不会到达那里，因为沿途它穿过#login 元素，这会阻止事件进一步冒泡stopPropagation。

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

【讨论】：

【解决方案3】：

使用 delegate() (http://api.jquery.com/delegate/) 或 on()（仅适用于 jQuery > 1.7）（http://api.jquery.com/on/）将钩子附加到您想要的孩子。委托/开启不要冒泡/传播。

【讨论】：