JQuery中反复调用函数

Question

默认情况下，我希望任何带有类“ .options”的按钮执行与alert（'Hello World'）相同的操作。 如果您在下面查看，则会看到另一个ID为“ append_another_content”的按钮。 它的工作是附加另一个<input type="button" class=".options" value="Option"> ，并使它执行与其余“ .options”按钮相同的操作。 但是，除非我再次调用myFunction（），否则刚刚添加的按钮将不会执行任何操作，现在的问题是，一旦添加了新内容，我将再次调用myFunction（），以前的按钮带有类'.options'会重复按下myApp（），具体取决于您按下“附加”按钮的次数。 我的目标是每次单击“ .options”按钮时仅调用一次myFunction（）。

<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

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

考虑改用委托，在现有祖先为现有和将来的后代保留处理程序的情况下。 祖先越近越好。 这样，您只需调用一次 myFunction 。

在此示例中，祖先#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 个解决方案

解决方案1
1 已采纳 2013-11-23 00:46:21

HTML：

JS：

解决方案2
0 2013-11-23 00:50:31

编辑：

解决方案3
0 2013-11-23 00:54:55

JQuery中反复调用函数

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-11-23 00:46:21

HTML：

JS：

解决方案2 0 2013-11-23 00:50:31

编辑：

解决方案3 0 2013-11-23 00:54:55

解决方案1
1 已采纳 2013-11-23 00:46:21

解决方案2
0 2013-11-23 00:50:31

解决方案3
0 2013-11-23 00:54:55