Problème avec le plugin note JQuery étoiles et Ajax

Question

Je suis nouveau avec JQuery, Ajax, JavaScript

J'ai un problème avec nombre d'étoiles-plugin JQuery. Je l'ai utilisé dans quelques pages et ça marche très bien. Cependant quand j'ai utilisé dans une page Ajax, il n'a pas eu le même comportement.

Lorsque la page est rechargée, rien de plus n'est affiché. Les entrées sont cachées, comme avant, mais la div n'apparaît pas.

Je possède ce code lorsque la page est la charge:

<td class="rowstyle0" width="30%" align="left"> 
    <a onclick="javascript:abrirConsultaNova('/projectManager/projectManager/atividade.do?method=consultar&id=219', 'Consultar 219');" href="#219"> 
     <span class="star-rating-control"> 
      <div class="rating-cancel" style="display: none;"> 
      <a title="Cancel Rating"/> 
      </div> 
      <div id="avaliacao1_219" class="star-rating rater-0 star {split:2} star-rating-applied star-rating-readonly star-rating-on" style="width: 8px;"> 
      <a title="1" style="margin-left: 0px;">1</a> 
      </div> 
      <div id="avaliacao2_219" class="star-rating rater-0 star {split:2} star-rating-applied star-rating-readonly star-rating-on" style="width: 8px;"> 
      </div> 
      <div id="avaliacao3_219" class="star-rating rater-0 star {split:2} star-rating-applied star-rating-readonly star-rating-on" style="width: 8px;"> 
      </div> 
      <div id="avaliacao4_219" class="star-rating rater-0 star {split:2} star-rating-applied star-rating-readonly star-rating-on" style="width: 8px;"> 
      </div> 
     </span> 
     <input id="avaliacao1_219" class="star {split:2} star-rating-applied star-rating-readonly" type="radio" disabled="disabled" value="1" name="avaliacao219" style="display: none;"/> 
     <input id="avaliacao2_219" class="star {split:2} star-rating-applied star-rating-readonly" type="radio" disabled="disabled" value="2" name="avaliacao219" style="display: none;"/> 
     <input id="avaliacao3_219" class="star {split:2} star-rating-applied star-rating-readonly" type="radio" disabled="disabled" value="3" name="avaliacao219" style="display: none;"/> 
     <input id="avaliacao4_219" class="star {split:2} star-rating-applied star-rating-readonly" type="radio" disabled="disabled" value="4" name="avaliacao219" style="display: none;"/> 
    </a> 
</td> 

Et ce code lorsque la page est rechargée dynamiquement:

<td class="rowstyle0" width="30%" align="left"> 
    <a onclick="javascript:abrirConsultaNova('/projectManager/projectManager/atividade.do?method=consultar&id=219', 'Consultar 219');" href="#219"> 
     <input id="avaliacao1_219" class="star {split:2} star-rating-applied" type="radio" disabled="disabled" value="1" name="avaliacao219" style="display: none;"/> 
     <input id="avaliacao2_219" class="star {split:2} star-rating-applied" type="radio" disabled="disabled" value="2" name="avaliacao219" style="display: none;"/> 
     <input id="avaliacao3_219" class="star {split:2} star-rating-applied" type="radio" disabled="disabled" value="3" name="avaliacao219" style="display: none;"/> 
     <input id="avaliacao4_219" class="star {split:2} star-rating-applied" type="radio" disabled="disabled" value="4" name="avaliacao219" style="display: none;"/> 
    </a> 
</td> 

Comment puis-je obtenir les div de apparaissent sur un poste arrière?

Answer 1

Vous associez vraisemblablement des événements à # star-rating-control. Si vous reconstruisez le DOM via AJAX, vos événements seront perdus. Vous devrez les rattacher après l'événement AJAX.

Answer 2

J'ai eu le problème dans le scénario Ajax. Seuls les boutons radio sont apparus. J'ai juste accroché les événements après avoir chargé le contenu.

$('input[type="radio"].star').rating(); // Hook the events. 

Vous pouvez activer les étoiles grâce à l'instruction suivante.

$('input[type="radio"].star').rating('enable');