Binding onchange to dropdown

Question

Sono poco confuso nel binding onchange a select. Vedo che ci sono molti modi per farlo.

html

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

jquery

$(function(){ 

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

}); 

o

$(function(){ 

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

}); 

Tra questi 3 metodi

0.123.

1. Quale è considerata una pratica standard?
2. C'è qualche merito con uno di questi metodi?

Answer 1

è anche possibile utilizzare .on

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

Prima di jQuery 1.7, change() era semplicemente un taglio corto per bind("change").

A partire da 1.7 tuttavia, on() ha sostituito bind("change"), so change() è invece una scorciatoia per quello.

Quindi il modo migliore sarebbe;

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

io preferisco la seconda opzione in quanto può anche applicata automaticamente al generati dinamicamente DOM.

Answer 2

tutti i metodi jquery citati sembrano essere uguali, suggerirei di utilizzare .change() per rendere più semplice la lettura del codice.

Ho sperimentato che html onchange = "" viene riscritto da eventi legati a jquery, ma più chiamate a jquery .change() concatenano i gestori che di solito sono comportamenti voluti.

Per rendere il codice pulito, sto usando la proprietà html onchange solo in programmi semplici che so che non avranno più gestori di eventi e il codice all'interno è veramente semplice (di solito una funzione).

Answer 3

Invece di riconciliare lo <select> ogni volta, è meglio scambiare il suo contenuto (l'elenco degli elementi <option>).

Quindi utilizzare questo come già siete:

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

ma quando si aggiorna, basta scambiare il suo contenuto (dove newSelectElement è il nuovo elemento <select>):

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