Виджет Звездный рейтинг с загрузкой jQuery ajax

Question

Работает нормально, когда страница сначала загружается в браузер.

Однако проблема начинается, когда контейнер DIV, содержащий этот рейтинг звезды, был снова загружен с загрузкой Ajax.Он был сброшен до своей первоначальной кнопки-переключателя:

Код для создания этой звездообразной оценки был так же прост, как и следующий:

Плагин виджета звездной оценки:

$("#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 );

У кого-нибудь есть идеи, как решить эту проблему?Кажется, он плохо работает с загрузкой Ajax.

Answer 1

Проблема, с которой вы сталкиваетесь, заключается в том, что вы в настоящее время привязываете только элементы, которые уже существуют на странице. Когда вы загружаете новые данные на страницу с помощью AJAX-запроса, ваш виджет «звезды» не является активным и, следовательно, не привязан к этим новым элементам.

Вам потребуется повторно привязать эти элементы в вашей загрузке AJAX следующим образом:

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

Возможно, ваш виджет включает live API, но с тех пор live устарело в jQuery.