Wiązanie onchange do dropdown

Question

Jestem trochę zdezorientowany w wiązaniu onchange do select. Widzę, że jest na to wiele sposobów.

HTML

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

jQuery

$(function(){ 

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

}); 

lub

$(function(){ 

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

}); 

Wśród tych 3 metod

0.123.

1. Która z nich jest uważana za standardową praktykę?
2. Czy jest jakaś zaleta z którąkolwiek z tych metod?

Answer 1

Można również użyć .on

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

Przed jQuery 1.7, change() był po prostu skrót dla bind("change").

Od 1.7 jednak on() zastąpił bind("change"), so change() jest skrótem do tego.

Dlatego też najlepszym sposobem byłoby;

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

Wolę 2nd opcji jak również można zastosować automatycznie do dynamicznie generowane DOM.

Answer 2

wszystkie wymienione metody jquery wydają się być równe, sugerowałbym użycie .change(), aby twój kod był łatwiejszy do odczytania.

Doświadczyłem, że html onchange = "" jest przepisywany przez zdarzenia związane z jquery, ale wielokrotne wywoływanie do jquery .change() będzie łączyć w łańcuchy obsługi, co jest zwykle pożądanym zachowaniem.

Aby kod był czysty, korzystam z właściwości html onchange tylko w prostych programach, o których wiem, że nie będą mieć wielu procedur obsługi zdarzeń, a kod w środku jest naprawdę łatwy (zazwyczaj jedna funkcja).

Answer 3

Zamiast ponownie wiązać numer <select>, lepiej jest zamieniać jego zawartość (listę elementów <option>).

więc korzystać z tego, jak już to:

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

ale podczas aktualizacji, po prostu zamienić się jego zawartość (gdzie newSelectElement jest nowy <select> element):

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