Jquery 不使用像 JRate 插件这样的插件处理新添加到 dom 的元素

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

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

您需要将该方法应用于新添加的 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');