fonction jquery .Modification () ne fonctionne pas avec la liste SELECT dynamique de population

StackOverflow https://stackoverflow.com/questions/2031826

Question

J'ai un champ de sélection qui est dynamiquement peuplé avec un appel ajax qui retourne simplement toutes les options de sélection HTML. Voici la partie du PHP qui vient d'écho sont les balises select et remplit dynamiquement à chaque option / valeur. 

echo "<select name='player1' class='affector'>";
echo "<option value='' selected>--".sizeof($start)." PLAYERS LOADED--</option>";

foreach ($start as $value) {
    echo "<option value='".$value."'>".$value."</option>";
 }  
  echo "</select>";
}

Après cette liste est remplie, je suis en train d'appeler un événement de changement, de sorte que chaque fois que l'option par défaut est modifiée dans la liste SELECT ou dans un champ de texte avec la même classe, il désactive un bouton radio situé dans une autre partie de la forme. (Vous pouvez voir la première question, j'ai demandé d'obtenir cette partie de la fonctionnalité de travail ) 

$('.affector').change(function(){
       $(this).parents('tr').find('input:radio').attr('disabled', false);
});

Pour une raison quelconque, même si je donne le champ, sélectionnez le nom de la classe appropriée (affecteur), lorsque je sélectionne des options différentes dans le domaine, les autres parties du formulaire ne désactivez pas. Le champ de texte statique avec la même classe fonctionne très bien. Je suis perplexe.

Toutes les idées?

Était-ce utile?

La solution

Juste commenté votre dernière question ... Voici ce que je dis:

Utiliser la liaison jQuery 

function addSelectChange() {
   $('select').bind('change', function() {
       // yada yada
   });
}

Appel addSelectChange dans votre fonction ajax succès. Il devrait faire l'affaire. Jetez un oeil à l'événement en direct jQuery trop (pour quand vous voulez définir des événements pour tous les éléments DOM actuels et futurs dans un projet plus tard, ou quelque chose). Malheureusement, l'événement change et quelques autres ne sont pas encore pris en charge avec en direct. Bind est la meilleure chose

Autres conseils

A plus à jour réponse ..

Étant donné que les éléments sont renseignés de manière dynamique, vous recherchez rel="noreferrer">.

Ne pas utiliser .live() / .bind() / .delegate(), cependant. Vous devez utiliser .on() .

Selon le API docs jQuery :

  

Au jQuery 1,7, le procédé .on() est la méthode préférée pour attacher des gestionnaires d'événements à un document. Pour les versions antérieures, la méthode .bind() est utilisé pour la fixation d'un gestionnaire d'événements directement à des éléments. Handlers sont fixés aux éléments sélectionnés dans l'objet jQuery, de sorte que ces éléments doivent exister au moment de l'appel à .bind() se produit. Pour l'événement plus souple de liaison, voir la discussion de la délégation de l'événement dans .on() .

vous donc utiliser quelque chose comme ceci: 

$(document).on('change', 'select', function (e) {
    /* ... */
});

Un exemple en utilisant .live () 

$('#my_form_id select[name^="my_select_name"]').live('change', (function () {
    console.log( $("option:selected", this).val());
    })
 );

Pour les articles qui sont dynamiquement insérés dans les DOM, les événements doivent être liés avec 

$('.selector').bind('change',function() { doWork() });

En effet, lorsque vous exécutez $(function(){}); et lier des événements en utilisant $.click ou $.change, etc., vous événements de liaison aux éléments déjà existant dans les DOM . Toute manipulation vous fait après cela ne soit pas affectée par ce qui se passe dans l'appel $(function(){});. $.bind dit votre page pour rechercher des éléments futurs dans votre sélecteur ainsi que les actuels.

essayer .live: http://docs.jquery.com/Events/live

A partir de docs: Associe un gestionnaire à un événement (comme un clic) pour tout le courant - élément adapté - et futur. Peut lier aussi des événements personnalisés.

J'ai trouvé que la solution pour faire seulement 

<select id="myselect"></select>

dans le fichier php / html puis générer des options pour qu'il en ajax: 

$.post("options_generator.php", function (data) { $("#myselect").append(data); });

Dans options_generator.php option echo seulement: 

echo "<option value='1'>1</option>";
echo "<option value='2'>2</option>";

délégué utilisation () fonction à la place. En savoir plus sur ce ici http: // www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top