Question

美好的一天，

我编写了一个简单的jQuery语句，它应该动态创建一些HTML按钮并将它们链接到click事件处理程序。不幸的是，每次我点击某个创建的按钮时，偶数运行不会一次，但会创建按钮的次数。任何有关这个问题的帮助将非常感谢！谢谢！

我的代码是：

$(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); 
        });
    });
});

Answer 1

将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或类似的东西

Answer 2

每次添加新按钮时都会设置一个新的点击处理程序，这就是为什么它不止一次工作，并且得分增加不止一个。

只需取出点击处理程序，这将解决问题。

 $(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);
     });
 });

Answer 3

我认为你误解了.on()的作用。您只需要添加一次处理程序。事实上，你一遍又一遍地添加它是为什么它一次又一次地被解雇。

当你添加这样的事件处理程序时：

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

您没有将处理程序添加到.click-point元素，而是将其添加到#game_board元素。 DOM中的事件从子元素“冒泡”到父元素，因此单击#game_board内的任何内容都将触发此事件。函数的第二个参数'.click-point'是这些事件的过滤器，这样当这些冒泡事件来自.click-point元素时，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);
    });
});

Answer 4

通过将start_utton单击处理程序移出game_board单击处理程序解决：

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/

奇怪的逆转点击处理程序与动态jQuery生成按钮

4 个答案: