web-dev-qa-db-fra.com

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

J'ai un champ de sélection qui est rempli dynamiquement avec un appel ajax qui renvoie simplement toutes les options de sélection HTML. Voici la partie de PHP qui fait simplement écho aux balises de sélection et complète 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>";
}

Une fois cette liste renseignée, j'essaie d'appeler un événement change. Ainsi, chaque fois que l'option par défaut est modifiée dans la liste SELECT ou dans un champ de texte de la même classe, un bouton radio est défini dans une autre partie du formulaire . (Vous pouvez voir la question initiale que j'ai posée pour que cette partie de la fonctionnalité fonctionne ici )

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

Pour une raison quelconque, même si je donne le nom de classe correct (affecteur) au champ de sélection, lorsque je sélectionne différentes options dans le champ, les autres parties du formulaire ne sont pas désactivées. Le champ de texte statique avec la même classe fonctionne bien. Je suis perplexe.

Des idées?

jqueryselectonchangedynamically-generated
25
tresstylez

Juste commenté sur votre dernière question ... Voici ce que j'ai dit:

Utiliser jQuery bind 

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

Appelez addSelectChange dans votre fonction de succès ajax. Ça devrait faire l'affaire. Examinez également l'événement en direct jQuery (pour le moment où vous souhaitez définir des événements pour tous les éléments DOM actuels et futurs d'un projet ultérieur ou autre). Malheureusement, l'événement de changement et quelques autres ne sont pas encore pris en charge avec live. Bind est la prochaine meilleure chose

20
munch

Une réponse plus actuelle ..

Étant donné que les éléments sont remplis de manière dynamique, vous recherchez une délégation d’événements .

N'utilisez pas .live().bind()/.delegate(), CEPENDANT. VOUS DEVRIEZ UTILISER .on() .

SELON LA DQ API JQUERY :

DEPUIS JQUERY 1.7, LA M&EACUTE;THODE _/.on() est la méthode recommandée pour attacher 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 étant attachés aux éléments actuellement sélectionnés dans l'objet jQuery, ces éléments doivent exister au moment où l'appel à .bind() se produit. Pour une liaison plus souple des événements, voir la discussion sur la délégation d'événements dans .on() .

Par conséquent, vous utiliseriez quelque chose comme ceci:

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

Un exemple utilisant .live ()

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

Pour les éléments insérés dynamiquement dans le DOM, leurs événements doivent être liés à 

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

En effet, lorsque vous exécutez $(function(){}); et reliez des événements à l'aide de $.click ou $.change, etc., vous liez des événements à des éléments existant déjà dans le DOM . Toute manipulation que vous faites après cela ne sera pas affectée par ce qui se passera dans l'appel $(function(){});. $.bind indique à votre page de rechercher les éléments futurs dans votre sélecteur ainsi que ceux en cours.

3
Jason

J'ai trouvé comme solution de ne faire que 

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

dans un fichier php/html, puis générez des options pour cela par ajax: 

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

Dans options_generator.php, les options echo uniquement: 

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

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

A partir de la documentation: Lie un gestionnaire à un événement (comme un clic) pour tous les éléments actuels et futurs. Peut également lier des événements personnalisés.

1
brian chandley

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

0
Alexander Suleymanov