Question

It works fine when the page first loads into browser

However, problem starts when the the DIV container contains this star rating, was loaded again with Ajax load. It was reset to its original radio button:

The code to made this rating star works was just as simple as following:

Star Rating Widget Plugin:

$("#stars-wrapper").stars({
  cancelShow: false,
  disabled: true
});

<span id="stars-wrapper">
                <input type="radio" id="rate1" name="newrate" value="1" title="Poor" />
                <input type="radio" id="rate2" name="newrate" value="2" title="Not that bad" />
                <input type="radio" id="rate3" name="newrate" value="3" title="Average" />
                <input type="radio" id="rate4" name="newrate" value="4" title="Good" />
                <input type="radio" id="rate5" name="newrate" value="5" title="Perfect" />
 </span> 

Ajax Load:

$('#content_pane').load( href );

Does anyone have idea how to tackle this problem? It seems to be not working well with Ajax load.

Answer 1

The problem you’re encountering is that you’re currently only binding to elements that already exist on the page. When you load new data into the page using an AJAX request, your stars widget is not live and is thus not bound to these new elements.

You would need to re-bind to these elements within your AJAX load like so:

$('#content_pane').load( href, function() {
  $("#stars-wrapper").stars({
    cancelShow: false,
    disabled: true
  });
});

Perhaps your widget includes a live API, but live has since been deprecated in jQuery.