Question

我通过$('body').on('click')将点击事件附加到附加元素。但是如果我点击 id one 两次，它还会在其附加元素点击时发出两次警报。

如果我像$('body').off().on("click")一样附加，最后添加的元素点击只能提醒（如果我先点击一个id然后点击id为二，那么id为一个附加元素点击就可以提醒）。

如何为每个附加元素附加click事件以提醒一次？

＆＃13;

$(document).ready(function(){
  test.init();
})

var test = {
  init : function() {
    $("#one").on("click",function(){
      test.appendOne();
    });
    $("#two").on("click",function(){
      test.appendTwo();
    });
  },
  appendOne: function() {
    $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body");    
    $('body').on("click",'.one-after',function() {
      alert("clickedOne");
    });
  },
  appendTwo: function() {
    $("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body");    
    $('body').on("click",'.two-after',function() {
      alert("clickedTwo");
    });
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">One</button>
<button id="two">Two</button>

＆＃13;

Answer 1

你应该使用选择器子元素（）作为body元素的每个第一级子元素的选择器（参见https://api.jquery.com/children/的文档参考）

所以你的代码会变成：

$('body').children().on("click")

Answer 2

稍作修改，将事件直接添加到附加对象，如下所示：

  $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body")    
        .on("click",function() {
          alert("clickedOne"); })

你可以为另一个重复这种模式

Answer 3

每次点击按钮都会发生这种情况，您可以在body上绑定一个新事件。

您已经在使用事件委派，您只需要绑定一次事件，并且每个新元素都会有一个事件＆＃34;附加＆＃34; 。将您的事件绑定移到init：

中

＆＃13;

$(document).ready(function(){
  test.init();
})

var test = {
  init : function() {
    $('body').on("click",'.one-after',function() {
      alert("clickedOne");
    }).on("click",'.two-after',function() {
      alert("clickedTwo");
    });
    
    $("#one").on("click",function(){
      test.appendOne();
    });
    $("#two").on("click",function(){
      test.appendTwo();
    });
  },
  appendOne: function() {
    $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body");    
  },
  appendTwo: function() {
    $("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body");    
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">One</button>
<button id="two">Two</button>

＆＃13;

Answer 4

您可以简单地更改这两行：

$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body");    
$('body').on("click",'.one-after',function() {

to（chain appendTo with on。删除事件委托）：

$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body").on("click",function() {

您可以简单地将click事件添加到每个元素，而不是在主体上创建委派点击事件处理程序。

＆＃13;

$(document).ready(function(){
    test.init();
})

var test = {
    init : function() {
        $("#one").on("click",function(){
            test.appendOne();
        });
        $("#two").on("click",function(){
            test.appendTwo();
        });
    },
    appendOne: function() {
        $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body").on("click",function() {
            alert("clickedOne");
        });
    },
    appendTwo: function() {
        $("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body").on("click",function() {
            alert("clickedTwo");
        });
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="one">One</button>
<button id="two">Two</button>

＆＃13;

Answer 5

您可以使用jQuery的.one（）变体：

$("#one").one("click",function(){
  test.appendOne();
});

这只会发射一次。 http://api.jquery.com/one/

附加元素点击功能无法正常工作？

5 个答案: