動態jQuery的點擊處理程序的怪異回火產生按鈕

我寫這應該動態地創建一些HTML按鈕，並將其鏈接到一個click事件處理一個簡單的jQuery語句。不幸的是，每次我點擊一個創建的按鈕時，偶數運行不會一次，而是像創建按鈕一樣多次。任何有關這個問題的幫助將非常感謝！謝謝！

我的代碼是：

$(document).ready(function() { 
    var i = 0; 
    $('#start_button').click(function() { 
     $("#game_board").append($("<input type='button' class='click-point' id='" + (i++) + "' value='test" + i + "' />")); 
     $("#game_board").on("click", ".click-point", function (event) { 
      $(this).remove(); 
      $('#current_score').text(parseInt($('#current_score').html(), 10) + 1); 
     }); 
    }); 
});

來源

2014-03-03 tony.hegyes

你應該動點擊start_button的點擊處理程序點擊game_board的處理程序 – Huangism

我發誓我早些時候嘗試過，並且代碼完全停止工作......我可能放了一個錯誤的方括號或其他東西...再次，非常感謝！ –

試試吧，如果它不起作用，請用新代碼更新問題 – Huangism

移動的game_board單擊處理了

$(document).ready(function() { 
    var i = 0; 
    $('#start_button').click(function() { 
     $("#game_board").append($("<input type='button' class='click-point' id='" + (i++) + "' value='test" + i + "' />")); 
    }); 

    $("#game_board").on("click", ".click-point", function (event) { 
     $(this).remove(); 
     $('#current_score').text(parseInt($('#current_score').html(), 10) + 1); }); 
    }); 
});

編輯：只是作爲一個附加的建議，以數字創建ID可能不是一個好主意。我一度遇到麻煩。你可以在這裏閱讀can i have a div with id as number?你可以很容易的ID重命名爲類似q_NUMBER或類似的東西

來源

2014-03-03 20:43:21 Huangism

每次追加一個新的按鈕時，您正在設置新的單擊處理程序，所以這就是爲什麼它的工作一次以上，而得分在增加超過一個。

只需取出該點擊處理程序，這將解決問題。

$(document).ready(function() { 
    var i = 0; 
    $('#start_button').click(function() { 
     $("#game_board").append($("<input type='button' class='click-point' id='" + (i++) + "' value='test" + i + "' />")); 

    }); 
    $("#game_board").on("click", ".click-point", function (event) { 
     $(this).remove(); 
     $('#current_score').text(parseInt($('#current_score').html(), 10) + 1); 
    }); 
});

來源

2014-03-03 20:43:32 ocanal

我認爲你誤會了.on()的功能。你只需要添加一次處理程序。反覆添加它的事實是它爲什麼一遍又一遍地發射。

當您添加一個事件處理程序是這樣的：

$('#game_board').on('click', '.click-point', function() { 
    //... 
});

你不加處理程序到.click-point元素，你將它添加到#game_board元素。 DOM中的事件會從子元素向父元素「冒泡」，因此點擊#game_board中的任何內容都將觸發此事件。函數'.click-point'的第二個參數是這些事件的過濾器，以便jQuery知道只有在這些冒泡事件源自.click-point元素時纔會執行此代碼。

這樣，即使是動態添加的子元素仍然會被處理程序捕獲，因此不需要創建新的處理程序。因此，你只需要在父元素上一次創建的處理程序：

$(document).ready(function() { 
    var i = 0; 
    $('#start_button').click(function() { 
     $("#game_board").append($("<input type='button' class='click-point' id='" + (i++) + "' value='test" + i + "' />")); 
    }); 
    $("#game_board").on("click", ".click-point", function (event) { 
     $(this).remove(); $('#current_score').text(parseInt($('#current_score').html(), 10) + 1); 
    }); 
});

來源

2014-03-03 20:44:34 David

通過移動game_board單擊處理器出START_BUTTON點擊處理程序解決：

var i = 0; 
$('#start_button').click(function() { 
    $("#game_board").append($("<input type='button' class='click-point' id='" + (i++) + "' value='test" + i + "' />")); 
}); 

$("#game_board").on("click", ".click-point", function (event) { 
    $(this).remove(); 
    $('#current_score').text(parseInt($('#current_score').html(), 10) + 1); 
});

http://jsfiddle.net/qabcv/

來源

2014-03-03 20:52:08

動態jQuery的點擊處理程序的怪異回火產生按鈕

回答

相關問題