Comment ajouter correctement un < sélectionnez > sur une page avec jquery et laisser l’événement change fonctionner?

Question

J'ai actuellement plusieurs sélections sur une page qui sont ajoutées dynamiquement avec des appels ajax à l'aide de jquery.

Le problème que j’ai eu est que je ne pouvais pas faire en sorte que l’événement change s’ajoute à la sélection ajoutée, à moins d’utiliser le changement dans la balise, par exemple.

<select id="Size" size="1" onchange="onChange(this);">

Cela fonctionne, mais je me demande s’il est possible de le faire attribuer par jQuery. J'ai essayé d'utiliser $ ('select'). Change (onChange ($ (this))); à la place habituelle de $ (document) .ready mais cela n'a pas fonctionné.

J'ai essayé d'ajouter l'événement avec bind après l'appel ajax mais cela ne fonctionnait pas non plus.

Un meilleur moyen d'attribuer l'événement?

Answer 1

J'ai eu un problème similaire et j'ai trouvé cette solution ici :

  

Quand vous faites quelque chose comme ça:

$('p').click( function() { alert('blah'); } ) 

     

Tous les existants 'p'   les éléments auront un gestionnaire de clic   attaché. Maintenant si vous continuez à ajouter   d'autres éléments 'p' à la page qu'ils    n'aura pas le gestionnaire de clics qui lui est associé. Vous voudriez   besoin de " réexécuter " le

$('p').click( function() { alert('blah'); } )

     

sur les nouveaux éléments pour attacher le   les gestionnaires pour eux.

     

Vous voudrez peut-être regarder le    " LiveQuery " plugin en tant que gère   tous les éléments nouvellement ajoutés afin qu'ils obtiennent   les handlers précédemment attachés   attaché à eux quand ils sont ajoutés   vers une page.

     

Karl Rudd

Ainsi, après avoir ajouté les sélections, vous devrez répéter l'appel de change ().

Answer 2

  

$ ('select'). change (onChange ($ (this));

Vous devez comprendre la différence entre appeler une fonction et la transmettre sous forme d'objet. Les fonctions sont des objets de première classe en JavaScript. C’est un objet comme tout le reste. Elles peuvent donc être stockées dans des variables, transmises comme arguments à d’autres fonctions, etc.

.

Le code que vous avez appelé appelle la fonction onChange et donne le résultat à la fonction de modification de jQuery. Tu ne veux pas ça. L'idée est de passer la fonction elle-même à la fonction de modification de jQuery, et jQuery l'appelle lorsqu'il convient de le faire.

Lorsque vous avez des parenthèses - () - après le nom d’une fonction, vous l’appelez. Sinon, vous le traitez comme un objet. Ainsi, ce que vous avez l’intention de faire peut être accompli comme suit:

$('select').change(onChange);

Answer 3

Après avoir ajouté la sélection à votre page, vous devez lui ajouter l'événement change:

$('#newSelect').change(
    function() 
    { 
        onChange(this)
    }
);

Si vos sélections ont toutes la même classe, il est préférable de dissocier d'abord, puis de relier:

$('.classname').unbind("change");
$('.classname').change(
    function() 
    { 
        onChange(this)
    }
);

Answer 4

Merci les gars pour l'aide, les réponses ont fonctionné mais pas pour ce que je faisais. J'ai finalement compris en utilisant firebug. J'essayais d'assigner l'événement change avant que l'ajax ait fini de faire son travail (je suis nouveau dans ce genre de choses sur l'ajax, comme vous l'avez peut-être remarqué).

J'ai ajouté l'événement assignant un rappel au chargement () et maintenant tout fonctionne très bien.

        $(this).load('ploc002.php', {JobNumber: JobNumber, Edit: this.id}, function()
        {
            // The DOM has been changed by the AJAX call
            // Now we need to reassign the onchange events
            $('select,input').change( function()
            {
                onChange(this)
            });
        });