web-dev-qa-db-fra.com

Liaison on drop to dropdown

Je suis un peu confus en liant onchange à select. Je peux voir qu'il y a plusieurs façons de le faire.

html 

<select id="ddl" onchange="test()"></select>

jquery 

$(function(){

    $("#ddl").change(function(){
               return test();
           });

});

ou

 $(function(){

    $("#ddl").bind("change", function(){
               return test();
           });

});

Parmi ces 3 méthodes 

  1. Lequel est considéré comme une pratique standard?
  2. Y at-il des avantages avec l'une de ces méthodes?
jqueryhtmlevents
12
user1618825

Vous pouvez également utiliser .on

$('SELECT').on('change',function(){
   // code
});

Avant jQuery 1.7, change() était simplement un raccourci pour bind("change").

Cependant, à partir de la version 1.7, on() a remplacé bind("change"), so change() est un raccourci pour cela.

Par conséquent, le meilleur moyen serait soit;

$("SELECT").bind("change", function(e) {});
$("SELECT").on("change", function(e) {});

Je préfère la deuxième option car elle peut également s’appliquer automatiquement à la variable DOM générée dynamiquement.

16
Dipesh Parmar

toutes les méthodes jquery mentionnées semblent être égales, je suggérerais d'utiliser .change () pour rendre votre code plus facile à lire.

J'ai constaté que html onchange = "" est réécrit par des événements liés à jquery, mais plusieurs appels à jquery .change () enchaîneront les gestionnaires qui sont généralement le comportement souhaité.

Pour rendre le code propre, j'utilise la propriété html onchange uniquement dans des programmes simples qui, à ma connaissance, ne comporteront pas plusieurs gestionnaires d'événements et dont le code est très simple (généralement une fonction).

2
amik

Au lieu de relier le <select> à chaque fois, il vaut mieux échanger son contenu (la liste des éléments <option>).

Alors utilisez ceci comme vous l'êtes déjà:

$("#ItemsPerPage").change(function(e) { return updatePaging(); });

mais lorsque vous le mettez à jour, remplacez simplement son contenu (où newSelectElement est le nouvel élément <select>):

function updateItemsPerPage( newSelectElement ) {
    $("#ItemsPerPage").empty().append( newSelectElement.childNodes );
}
0
Kapil Gupta