web-dev-qa-db-ja.com

Jquery .change（）関数が動的に設定されたSELECTリストで機能しない

すべてのHTML選択オプションを単純に返すajax呼び出しで動的に入力される選択フィールドがあります。以下はPHPの一部で、selectタグをエコーし​​、各オプション/値を動的に入力します。

echo "<select name='player1' class='affector'>";
echo "<option value='' selected>--".sizeof($start)." PLAYERS LOADED--</option>";

foreach ($start as $value) {
    echo "<option value='".$value."'>".$value."</option>";
 }  
  echo "</select>";
}

このリストにデータが入力された後、変更イベントを呼び出そうとしています。そのため、SELECTリストまたは同じクラスのテキストフィールドでデフォルトオプションが変更されるたびに、フォームの別の部分に設定されたラジオボタンが無効になります。 （機能のこの部分を動作させるために私が尋ねた最初の質問を見ることができます here ）

$('.affector').change(function(){
       $(this).parents('tr').find('input:radio').attr('disabled', false);
});

何らかの理由で、選択フィールドに適切なクラス名（affector）を指定しても、フィールドで別のオプションを選択すると、フォームの他の部分は無効になりません。同じクラスの静的テキストフィールドは正常に機能します。私は困惑しています。

何か案は？

jqueryselectonchangedynamically-generated
25
tresstylez

あなたの最後の質問にコメントしました...私が言ったことは次のとおりです：

JQueryバインドを使用

function addSelectChange() {
   $('select').bind('change', function() {
       // yada yada
   });
}

Ajax成功関数でaddSelectChangeを呼び出します。トリックを行う必要があります。 jQueryライブイベントもご覧ください（後のプロジェクトなどで、現在および将来のすべてのDOM要素にイベントを設定する場合）。残念ながら、変更イベントと他のいくつかのイベントは、ライブではまだサポートされていません。バインドは次善の策

20
munch

最新の回答..

要素は動的に設定されるため、 イベント委任 を探しています。

ただし、.live()/.bind()/.delegate()は使用しないでください。 .on() を使用する必要があります。

jQuery API docs によると：

JQuery 1.7以降、 .on() メソッドは、イベントハンドラーをドキュメントにアタッチするための推奨メソッドです。以前のバージョンでは、 .bind() メソッドを使用して、イベントハンドラーを要素に直接アタッチします。ハンドラーは、jQueryオブジェクトで現在選択されている要素にアタッチされるため、これらの要素は .bind() の呼び出し時に存在する必要があります発生します。より柔軟なイベントバインディングについては、 .on() のイベント委任の説明を参照してください。

したがって、次のようなものを使用します。

$(document).on('change', 'select', function (e) {
    /* ... */
});
7
Josh Crozier

.live（）を使用した例

$('#my_form_id select[name^="my_select_name"]').live('change', (function () {
    console.log( $("option:selected", this).val());
    })
 );
5
Tapefreak

DOMに動的に挿入されるアイテムの場合、それらのイベントは

_$('.selector').bind('change',function() { doWork() });
_

これは、$(function(){});を実行し、_$.click_または_$.change_などを使用してイベントをバインドすると、イベントを要素にバインドしているためです既にDOMに存在します 。その後に行う操作は、$(function(){});呼び出しで発生するものの影響を受けません。 _$.bind_は、現在の要素だけでなくセレクタ内の将来の要素も検索するようページに指示します。

3
Jason

唯一の解決策として見つけました

<select id="myselect"></select>

php/htmlファイルで、ajaxによってそのオプションを生成します。

$.post("options_generator.php", function (data) { $("#myselect").append(data); });

Options_generator.phpエコーオプションのみ：

echo "<option value='1'>1</option>";
echo "<option value='2'>2</option>";
1
bboydev

.liveを試してください： http://docs.jquery.com/Events/live

Docsから：現在および将来のすべての一致要素のハンドラーをイベント（クリックなど）にバインドします。カスタムイベントをバインドすることもできます。

1
brian chandley

代わりにdelegate（）関数を使用してください。詳細はこちら http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

0
Alexander Suleymanov