25

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

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 リストまたは同じクラスのテキスト フィールドでデフォルト オプションが変更されるたびに、フォームの別の部分に設定されたラジオ ボタンが無効になります。 . (機能のこの部分を機能させるために私が尋ねた最初の質問をここで見ることができます)

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

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

何か案は？

4

7 に答える 7

20

ちょうどあなたの最後の質問にコメントしました...これが私が言ったことです：

jQuery バインドを使用する

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

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

于 2010-01-09T00:54:06.470 に答える
8

より最新の回答..

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

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

jQuery API docsによると：

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

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

$(document).on('change', 'select', function (e) {
    /* ... */
});
于 2015-01-05T00:36:33.470 に答える
5

.live() を使用した例

$('#my_form_id select[name^="my_select_name"]').live('change', (function () {
    console.log( $("option:selected", this).val());
    })
 );
于 2011-08-29T14:04:24.450 に答える
3

DOM に動的に挿入されるアイテムの場合、それらのイベントをバインドする必要があります。

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

これは、orなど$(function(){});を使用してイベントを実行およびバインドする場合、DOM に既に存在する要素にイベントをバインドしているためです。その後に行う操作は、呼び出しで何が起こっても影響を受けません。現在の要素だけでなく、セレクターで将来の要素を探すようにページに指示します。$.click$.change$(function(){});$.bind

于 2010-01-09T00:53:37.370 に答える
1

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

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

于 2010-01-09T00:53:54.997 に答える
1

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

<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>";
于 2012-04-26T11:01:24.673 に答える
0

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

于 2014-06-16T17:14:38.090 に答える