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

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