La fonction Jquery .change() ne fonctionne pas avec la liste SELECT remplie dynamiquement

Question

J'ai un champ select qui est rempli dynamiquement avec un appel ajax qui renvoie simplement toutes les options de sélection HTML. Voici la partie du PHP qui ne fait qu'échouer 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 définir dans une autre partie du formulaire. (Vous pouvez voir la première question, j'ai demandé d'obtenir cette partie de la fonctionnalité de travail here)

$('.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 sur le terrain, les autres parties du formulaire ne sont pas désactivées. Le champ de texte statique avec la même classe fonctionne correctement. Je suis perplexe.

Des idées?

Answer 1

Juste un commentaire sur votre dernière question ... Voici ce que je dis:

Utiliser jQuery lier

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

Appel addSelectChange dans votre fonction ajax succès. Cela devrait faire l'affaire. Jetez aussi un coup d'œil sur l'événement live jQuery (lorsque vous souhaitez définir des événements pour tous les éléments DOM actuels et futurs dans un projet ultérieur ou quelque chose de ce genre). Malheureusement, l'événement de changement et quelques autres ne sont pas encore pris en charge avec live. Bind est la meilleure chose

Answer 2

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 liez à des événements éléments déjà existant dans le DOM. Toute manipulation que vous faites après cela ne sera pas affectée par tout ce qui se passe dans l'appel $(function(){});. $.bind indique à votre page de rechercher les éléments futurs dans votre sélecteur ainsi que les éléments actuels.

Answer 3

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

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

Answer 4

Un exemple en utilisant .live()

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

Answer 5

J'ai trouvé comme solution pour rendre seulement

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

dans le fichier php/html puis générer des options pour par ajax:

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

Dans les options d'écho options_generator.php seulement:

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

Answer 6

Utilisez plutôt la fonction delegate().Plus à ce sujet ici http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Answer 7

_{Une plus à jour .. réponse}

Étant donné que les éléments sont renseignés de manière dynamique, vous recherchez event delegation. Ne pas utiliser .live()/.bind()/.delegate(), cependant. Vous devez utiliser .on().

Selon le jQuery API docs:

À partir de jQuery 1.7, la méthode .on() est la méthode préférée pour la fixation des gestionnaires d'événements à un document. Pour les versions antérieures, la méthode .bind() est utilisée pour attacher un gestionnaire d'événements directement aux éléments. Les gestionnaires sont attachés aux éléments actuellement sélectionnés dans l'objet jQuery, de sorte que ces éléments doivent exister au point où se produit l'appel à .bind(). Pour une liaison d'événements plus flexible, voir la discussion sur la délégation d'événements au .on().

vous serait donc utiliser quelque chose comme ceci: "<.. $ Valeur Valeur option =" "'>"

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