Question

默认情况下，我希望任何带有“.options”类的按钮执行相同的警报操作（'Hello World'）。如果你看下面，你会看到另一个名为'append_another_content'的id名称的按钮。它的工作是附加另一个<input type="button" class=".options" value="Option">并使其执行与“.options”按钮的其余操作相同的操作。但是刚刚附加的按钮不会执行任何操作，除非我调用myFunction（）AGAIN，现在问题是一旦我添加新内容后再次调用myFunction（），前面的按钮带有'.options'类将根据您按下“附加”按钮的次数重复调用myFunction（）。我的目标是，每次只调用myFunction（）一次'.options'按钮。

<html>
    <head></head>
    <body>
        <div id="wrap">
            <input type="button" class=".options" value="Option">
            <input type="button" class=".options" value="Option">
            <input type="button" class=".options" value="Option">
            <input type="button" class=".options" value="Option">
        </div>

        <input type="button" id="append_another_content" value="Append"/>
    </body>

    <script>
        function myFunction(){
            $('.options').click(function(){
               alert('Hello Friends!');
            });
        }

        //By default I want any buttons with a class '.options' to perform the same actions which is to alert('Hello World')
        myFunction();

        $('#append_another_content').click(function(){
            $.ajax({
                type: 'POST',
                url: 'ajax/get_another_button.php',
            }).done(function(data){
                $('#wrap').append(data);
                //The data will just return '<input type="button" class=".options" value="Option">'

                //The button that has just been appended will not perform any action unless I call myFunction()
                myFunction();
            });

        }); 


    </script>
</html>

Answer 1

那是因为new元素没有绑定处理程序，只有现有的处理程序（在调用myFunction之前DOM上的那些处理程序）。再次调用myFunction会添加另一个处理程序，依此类推。

请考虑使用委托，其中现有祖先持有现有和未来后代的处理程序。祖先越近越好。这样，您只需拨打myFunction 一次。

In this example，祖先#wrap拥有.options的处理程序。这将对所有现有和未来.options生效。

HTML：

<div id="wrap">
    <input type="button" class="options" value="Option">
    <input type="button" class="options" value="Option">
    <input type="button" class="options" value="Option">
    <input type="button" class="options" value="Option">
</div>
<input type="button" id="append_another_content" value="Append" />

JS：

$('#wrap').on('click', '.options', function () {
  alert('Hello Friends!');
});

$('#append_another_content').click(function () {
  $(this)
    .siblings('#wrap')
    .append('<input type="button" class="options" value="Option">');
});

Answer 2

当您将事件处理程序添加到新创建的元素时，还会向所有先前元素添加另一个事件处理程序。

您只能将事件处理程序添加到您创建的元素中：

function myFunction(e){
    $(e).click(function(){
       alert('Hello Friends!');
    });
}

myFunction('.options');

$('#append_another_content').click(function(){
    var input = $('<input type="button" class=".options" value="Option">');
    $(this).siblings('#wrap').append(input);
    myFunction(input);
});

编辑：

使用来自AJAX调用的数据，您可以完全相同：

var input = $(data);
$('#wrap').append(input);
myFunction(input);

Answer 3

首先，删除HTML .属性中的class。目前，$(".options")没有选择任何内容，因为没有class="options"的元素。它应该是

<input type="button" class="options" value="Option" />

接下来，在创建按钮时将点击处理程序添加到按钮：

$(/*...*/).appendTo($(this).siblings("#wrap")).click(handler);

或使用委托：

$("#wrap").on("click", ".options", handler);

函数在JQuery中被重复调用

3 个答案:

HTML：

JS：

编辑：