jquery - Ajax 在动态创建的元素上触发了很多次

Question

我正在使用这个插件 jrating。https://github.com/alpixel/jRating。

HTML

<button class="btn">ADD</button>


<div id="doc"></div>

查询

$(document).on('click', '.btn', function () {
    $('#doc').append('aaa<div class="rating" id="0_5"></div>');
    $('.rating').jRating();
});
$('.rating').jRating();

当我动态地将新的 div 添加到 doc. $('.rating').jRating();如果我不在点击功能中使用，评级不会显示。

问题：当我动态附加四个 div 并单击第一个附加的 div 时，ajax 会触发 4 次。这适用于 4 所有其他元素。就像单击第 3 次附加 div 3 次，第 2 次 2 次一样。不知道为什么会这样

小提琴：http: //jsfiddle.net/TFWXG/

Answer 1

当您$('.rating').jRating();在单击处理程序中执行此操作时，您会一次又一次rating地为页面中存在的所有元素初始化插件，而不是仅为新元素初始化

$(document).on('click','.btn',function(){
   $('aaa<div class="rating" id="0_5"></div>').appendTo('#doc').jRating();    
});