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

Question

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 provided for my problem)

I am using JRate plugin, I am adding a div inside a div using jQuery. The problem is that when I add it using jQuery and use the JRate Functions then they are not working. But they are working without appending a new div.

I know how to make it work. I will have to use $(document) but I dont know how to use it with this code.

Here is HTML

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

Here is my Jquery

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

Here is my appending code

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

Can any one tell me how can I use $(document) here or any other alternative solution you have.

score 1 · Accepted Answer · answered May 23 '15 at 20:19

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

answered May 23 '15 at 20:19

AmmarCSE

30,079
5
45
53

ok, next step. I need to reproduce it. Can you put it up in a fiddle or give me a site you are using it on? – AmmarCSE May 23 '15 at 20:26
when you say it is not working, do you mean it draws the stars but onSet is not working? Or does it give an error? – AmmarCSE May 23 '15 at 20:29
it draws the stars but onSet is not working and it deos not give any error – Muhammad Usama Mashkoor May 23 '15 at 20:30
is their a way i can reset the star to 0 on using jquery so that i don't have to append a new one in the body – Muhammad Usama Mashkoor May 23 '15 at 20:36
@usama, can you get it in a fiddle or somehow give me an example to play with? – AmmarCSE May 23 '15 at 20:43
I am trying to get it in a fiddle but thier is no cdn provide by the site http://www.toolitup.com/jRate.html so fiddle is not working.. :( – Muhammad Usama Mashkoor May 23 '15 at 20:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78613/discussion-between-ammarcse-and-usama). – AmmarCSE May 23 '15 at 21:16

Terry · Answer 2 · 2015-05-23T19:15:46.230

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

here is my appending code now can you tell how can i make it work var divjRate = "
"; $(divjRate).appendTo('.fb-jRate'); — Muhammad Usama Mashkoor, May 23 '15 at 19:05
@usama Might be because of a selector issue. Try my updated answer now. — Terry, May 23 '15 at 19:16

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

2 Answers2

Linked