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

您链接的解决方案适用于绑定事件侦听器，典型的 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');

Answer 2

您需要先附加 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);
    }
});

Jquery 无法使用 JRate 插件等插件处理新添加到 dom 的元素

Jquery is not working on newly added elements to the dom with Plugin like JRate Plugin

javascript

jquery

plugins

jquery-plugins