Jquery Is Not Working On Newly Added Elements To The Dom With Plugin Like JRate Plugin

I have been searching this on internet, I have found some answers which were helpful like but they were not enough to solve my problem (e.g. Similar Problem but no solution provid

Solution 1:

You need to append the html element first so that it is registered in the DOM. Then, you can call jRate on it

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);
    }
});

Solution 2:

The solution you have linked applies to binding event listeners, which is not the case with a typical jQuery plugin that usually involves DOM replacement and other things.

You will need to apply the method to newly added DOM elements. The DOM mutation event specification is deprecated due to performance issues, and it is not realistic to expect the browser to keep track of all changes (and what kind of changes) happening in the DOM.

For example, if you're adding new content with an AJAX call, you can apply the method to newly added content within the jqXHR.done() function.

---

Update: OP provided with some code, so I have adding a way to initialize the plugin for newly added DOM element:

// 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');