23

以下の HTML のように、select 要素を動的に追加しています。.on('change' ...) が動的選択で機能しない理由がわかりません。私は何が欠けていますか？

Chrome 24.0.1312.57 + jquery 1.8.3 を使用しています。

<script type="text/javascript">
  $(document).ready(function() {
      $('#x select').on('change', function () { alert('helo'); })
      $('#y select').on('change', function () { alert('helo'); })

      $('#x').html($('#y').html());
  });
</script>

<div id="x"></div>
<div id="y">
    <select>
        <option>O1</option>
        <option>O2</option>
    </select>
</div>
4

10 に答える 10

39

あなたのコード：

$('#x select').on('change', function () { alert('helo'); })

#x要素内のselectにイベントハンドラーをアタッチします。

（私が理解したことから）あなたが望むものは、次のようなものです。

$("#y").on('change','select',function () { alert('helo'); });

これにより、子の'select'要素に委任される#y要素にイベントハンドラーがアタッチされます。

http://api.jquery.com/on/から

.on（）メソッドは、jQueryオブジェクトで現在選択されている要素のセットにイベントハンドラーをアタッチします。

于 2013-02-18T17:41:29.977 に答える
14

最初のページ読み込み時にDOMにない要素へのイベントバインディングは機能しません。イベントをトリクルダウンできるようにするには、存在するDOMのさらに上の要素にバインドする必要があります。これは通常、私が採用するアプローチです。

$(document).on({
  change: function() {
    alert('helo');
  }
}, '#x select');

$(document).on({
  change: function() {
    alert('helo');
  }
}, '#y select');

後続のイベントを簡単に追加できるので、私はそれを好みます。

$(document).on({
  change: function() {
    alert('helo');
  },
  blur: function() {
    alert('helo');
  }
}, '#x select');
于 2013-02-18T17:38:41.683 に答える
3

イベントバインディングは$（document）.ready（）に設定されています。ただし、後で動的に追加する場合（jQuery.appendTo（）などを介して）、新しく追加されたコンポーネントは、$（document）.ready（）で発生した最初のコンポーネントの一部ではなかったため、バインドする必要があります。 、ページが読み込まれ、DOMが最初に実行されたときに1回だけ実行されます。

于 2013-02-18T17:38:41.327 に答える
1

.on（）の要点は、イベントをドキュメント以外のものにバインドできるようにすることです。これは、現在減価償却されている.live（）が行ったことであり、ほとんどの場合非効率的です。動的に変更されない最も近い親要素にイベントをバインドする必要があります。

私の知る限り、これは正しい構文です。

$('#x').on('change', 'select', function(){
    alert('hello');
});

#xまたは#yが変更される場合は、それらを要素でラップし、イベントをそれにバインドします。

于 2013-02-18T17:40:48.600 に答える
1

かんたんだよ。ターゲティングするクラスまたは ID が何であれ、より正確に設定してください。ただし、スーパー ペアレントを含める必要はありません。

間違った方法の例:

        $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

正しい方法:

        $('#tablecontent').on('change', 'table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

スーパーペアレント「#tablecontent」を削除したことに注意してください

それはすべて明快さについてです。

  • Ⅴ
于 2015-09-01T17:45:08.840 に答える
1 

        $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

        $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

        $('#tablecontent').on('change', 'table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

        $('#tablecontent').on('change', '#tablecontent > table.CampaignGrid > tbody > tr > td', function(e) {
            console.log('IN TABLE CONTENT CHANGE');
            var value = e.target.value;
            $('button#updateLuck').prop('disabled', false).css({'color': '#000', 'font-weight': 600});

            //alert($(ele[0]).html());
        });

于 2015-11-21T09:59:02.387 に答える
1

角括弧内の単語は代替テキストで、ブラウザが画像を表示できない場合に表示されます。画面読み上げソフトウェアには、意味のある代替テキストを必ず含めてください。

于 2015-11-21T10:02:14.100 に答える
1

正しい構文:

 $('#x').on(
        'change', 
         'select', 
          function () { 
            alert('helo'); 
          }
       );

したがってon()、動的要素の構文は次のようになります。

$(staticParent).on( eventName, target, handler);
于 2013-02-18T17:35:06.953 に答える
0

イベントをトリガーするために、動的IDを持つajax投稿から戻ってきた動的に作成された選択を取得できなかったため、これに遭遇しました。

$(document).on('change', 'select', function (e) {
    $("#theDiv select").on("change",function(){ post("SelectChanged");} );
});

これは、最初に何かを変更するまで機能しないため、追加しました

$("#theDiv select").on("change",function(){ post("SelectChanged");} );

ただし、これは、変更後に他のすべての変更が 2 回発生したことを意味するものではありません。これはあまり良い習慣ではないかもしれません。しかし、私がしたことは、ajax の開始時と各戻り時に呼び出される関数を入れることでした。

 `function myFuncs(){
    $('#theDiv select').unbind('change');
    $('#theDiv select').on('change' function(){ post('selectChanged'); });
  }`

しかし、各関数呼び出しの開始時にバインドを解除する必要がありました。そうしないと、毎回関数が2倍になりました。これを行う適切な方法があるに違いないと確信していますが、まだ見つけていません。質問を開始していただきありがとうございます。

于 2020-05-06T15:59:16.913 に答える