Jquery没有在插件中添加新元素，如JRate Plugin

Question

我一直在网上搜索，我发现了一些有用的答案，但它们不足以解决我的问题（例如， Similar Problem but no solution provided for my problem）

我正在使用JRate插件，我在使用jQuery的div中添加div。问题是，当我使用jQuery添加它并使用JRate函数时，它们不起作用。但他们正在工作，不追加新的div。

我知道如何使它工作。我将不得不使用$(document)，但我不知道如何使用此代码。

这里是HTML

<div class="jRate"></div> 

，这里是我的Jquery

$(".jRate").jRate({ 
    onSet: function(rating) {        
     alert(rating); 
    } 
}); 

这里是我的附加码

var divjRate = "<div class='jRate'></div>"; 
$(divjRate).appendTo('.fb-jRate'); 

任何一个可以告诉我，我该如何使用$(document)这里或任何你有其他替代解决方案。

Answer 1

您需要的HTML元素首先附加使它在DOM中注册。然后，你可以调用它jRate

var divjRate = "<div><div class='jRate'></div></div>"; 

// Append new element to container of choice 
$(divjRate).appendTo('.fb-jRate'); 

// Use plugin on new element 
$('.jRate').jRate({ 
    onSet: function(rating) {        
     alert(rating); 
    } 
}); 

Answer 2

您链接的解决方案适用于绑定事件侦听器，而通常涉及DOM替换和其他事情的典型jQuery插件不是这种情况。

您需要将该方法应用于新添加的DOM元素。 DOM突变事件规范由于性能问题而不推荐使用，期望浏览器记录DOM中发生的所有更改（以及更改类型）是不现实的。例如，如果要通过AJAX调用添加新内容，则可以将该方法应用于jqXHR.done()函数中新添加的内容。

---

更新：提供一些代码OP，所以我加入一个方法来初始化插件新增DOM元素：

// Declare new element 
var divjRate = "<div><div class='jRate'></div></div>"; 

// Use plugin on new element 
$(divjRate).find('.jRate').jRate({ 
    onSet: function(rating) {        
     alert(rating); 
    } 
}); 

// Append new element to container of choice 
$(divjRate).appendTo('.fb-jRate');