Javascript JQuery click函数不适用于包含它的父元素中的按钮'；自己的点击功能

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

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

有什么想法吗

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

正确，再加上您正在使用

live

钩住按钮的点击。如果直接连接，按钮将首先获取事件。但是，因为您使用了

live

，按钮单击事件直到/除非单击一直到达

文档

，否则不会被触发，因为

live

就是这样工作的：它在文档级别钩住事件，然后，当事件到达时，它查看您使用的选择器是否与实际单击的元素或其任何祖先匹配。在您的例子中，它实际上从未到达那里，因为在它通过

#login

元素的过程中，它会阻止事件进一步通过

stopPropagation

冒泡

---

因此，要使此功能正常工作，您需要将按钮正常挂起，而不是使用

live

。从您的结构来看，似乎没有任何理由立即使用

live

（当然也有可能有些东西您没有展示给我们）。如果在所有

#login

单击处理程序都被附加后动态添加按钮，则在添加按钮时必须将其挂起。

函数将

live

处理程序附加到

文档

元素，并等待事件传播。您认为阻止事件传播就是阻止调用处理程序是正确的。您可以使用

委托

方法解决此问题（类似于live，但使用指定的父元素而不是

文档

）：

或者在jQuery 1.7+中，可以使用

on

方法：

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

使用delegate（）或on（）（仅当jQuery>1.7时）将钩子附加到所需的子对象。委托/启用不冒泡/传播

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

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