3

docType というクラスを持つ select2 要素でアコーディオンを作成するコードがあります。また、jquery 要素の値を選択したときにイベントをトリガーする jquery コードもあります。これは、ページの読み込み時に既に存在する select2 要素に対しては機能しますが、動的に追加された要素に対してはトリガーされません。これが私の変更コードです：

$('.docType').on('change', function() {
    // the code inside should be firing for dynamically added elements
}

この方法が機能しない理由を誰かが知っていますか?

4

4 に答える 4

5

動的に追加された要素にはイベント委任を使用します。

$(document).on("change",".docType", function() {

于 2015-12-23T16:21:04.430 に答える
3

イベントを委任するには、「on」メソッドを使用します。これにより、動的に生成された要素にハンドラーが追加されます。

$(document).on("change",".classnameyouarewatching", function() {

 //Your code
}

メソッド定義について

于 2015-12-23T16:24:11.153 に答える
0

要素が動的に読み込まれている場合は、以下のようなものを使用する必要があります。たとえば、AJAX などを介して次の入力要素を動的に生成しているとします。

<input type="text" class="text_element" value="some value">

その要素にイベント ハンドラーを追加するには、次のように JS を使用してみてください。

<script type="text/javascript">
$(document).on('change', '.text_element', function() {
    console.log('Element with class "text_element" has changed');
    console.log('New value is: ' + $(this).val());
});
</script>

上記の答えは正しいですが、動的に生成された DOM 要素の処理を委任するのは「on」ハンドラーだけではありません。ここでの実際のトリックは、上記の要素または要素クラスではなく、常に存在するハンドラーをドキュメントに配置することです。これはドキュメントのハンドラーであり、探しているジョブを実行するクラスの要素 (on イベントの 2 番目のパラメーター) を探します。

于 2015-12-23T16:24:49.047 に答える