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的工作原理：它在文档级别挂钩事件，然后，当事件到达时，它会查看您使用的选择器是否与实际单击的元素或其任何祖先相匹配。在你的情况下，它实际上永远不会到达那里，因为它一路走过#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方法：

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

Answer 3

使用delegate（）（http://api.jquery.com/delegate/）或on（）（仅限jQuery＆gt; 1.7）（http://api.jquery.com/on/）将挂钩附加到您想要的孩子。 Delegate / On不会冒泡/传播。

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

3 个答案: