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不會冒泡/傳播。