jquery - onchangeをドロップダウンにバインドする

Question

onchangeにバインドするのは少し混乱していselectます。これを行うには複数の方法があることがわかります。

html

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

jquery

$(function(){

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

});

また

 $(function(){

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

});

これらの3つの方法の中で

score 17 · Accepted Answer

使用することもできます.on

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

jQuery 1.7より前は、change()は単なるショートカットでしbind("change")た。

ただし、1.7以降では、on()が置き換えられbind("change")、so change()代わりにそのショートカットになります。

したがって、最善の方法は次のいずれかです。

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

動的に生成されたに自動的に適用できるため、2番目のオプションをお勧めしますDOM。

score 2 · Accepted Answer

言及されたすべてのjqueryメソッドは等しいようです.change（）を使用してコードを読みやすくすることをお勧めします。

html onchange="" が jquery バインドイベントによって書き換えられることを経験しましたが、jquery .change() を複数回呼び出すと、通常は必要な動作であるハンドラーがチェーンされます。

コードをきれいにするために、複数のイベントハンドラーを持たず、内部のコードが非常に簡単 (通常は 1 つの関数) であることがわかっている単純なプログラムでのみ、html onchange プロパティを使用しています。

score 0 · Accepted Answer

<select>毎回再バインドする代わりに、代わりにその内容 (<option>要素のリスト) を交換する方がよいでしょう。

したがって、これをそのまま使用します。

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

ただし、更新するときは、その内容を交換するだけです（ newSelectElement は新しい<select>要素です）：

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

3 に答える 3