Select2が生成した要素をJSで処理していない

Question

私のプロジェクトでSelect2を使用しています。私の問題は、select2:selectイベントがJSによって生成された要素で機能していないことです。

私はあなたが私の言うことをテストできるようにこのスニペットを作成しました。

var i = 0, 
 
\t \t data = [ 
 
    \t { 
 
     \t id: 0, 
 
     text: 'Bob' 
 
     }, 
 
     { 
 
     \t id: 1, 
 
     text: 'Martin' 
 
     }, 
 
     { 
 
     \t id: 2, 
 
     text: 'John' 
 
     } 
 
\t \t ]; 
 
    $('#in-9').select2({ 
 
    \t data: data 
 
    }); 
 
    
 
    // Button click event 
 
$('#append').on('click', function() { 
 
\t var html = '<p><label for="in-' + i + '">Select2 #' + i + ':</label><br><input id="in-' + i + '" class="in"><br></p>'; 
 
    
 
    // Append HTML to Body 
 
\t $('body').append(html); 
 
    
 
    // Assign data to input 
 
    $('#in-' + i).select2({ 
 
    \t data: data 
 
    }); 
 
    
 
    // Increase counter 
 
    i++; 
 
\t 
 
}); 
 

 
// Trigger "select" on select2 only works in first element. 
 
$('.in').on('select2:select', function() { 
 
\t alert('wii'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script> 
 
<button id="append">Append to Body</button> 
 

 
<!-- First element --> 
 
<p> 
 
    <label for="in-9'">Select2 #9:</label><br> 
 
    <input id="in-9" class="in"><br> 
 
</p>

あなたはid="in-9"でHTML要素をHTMLで作成されますが、Append to Bodyをクリックすると、Javascript関数が呼び出され、生成された要素がselect2:selectイベントをトリガすることはできませんフィドルで見ることができます最初のもののように。

私は動的に生成された要素のselect2:selectイベントをどのように呼び出すことができますか？

Answer 1

jQueryのon()メソッドを使用できます。

.on()方法は、現在選択されているにイベントハンドラをアタッチは、あなたがこれを試すことができます要素の やjQueryオブジェクトで、動的に生成された要素

を設定します。

$('body').on('select2:select', '.in', function() { 
    alert('wii'); 
}); 

を見てください次のスニペット：

var i = 0, 
 
\t \t data = [ 
 
    \t { 
 
     \t id: 0, 
 
     text: 'Bob' 
 
     }, 
 
     { 
 
     \t id: 1, 
 
     text: 'Martin' 
 
     }, 
 
     { 
 
     \t id: 2, 
 
     text: 'John' 
 
     } 
 
\t \t ]; 
 
    $('#in-9').select2({ 
 
    \t data: data 
 
    }); 
 
    
 
    // Button click event 
 
$('#append').on('click', function() { 
 
\t var html = '<p><label for="in-' + i + '">Select2 #' + i + ':</label><br><input id="in-' + i + '" class="in"><br></p>'; 
 
    
 
    // Append HTML to Body 
 
\t $('body').append(html); 
 
    
 
    // Assign data to input 
 
    $('#in-' + i).select2({ 
 
    \t data: data 
 
    }); 
 
    
 
    // Increase counter 
 
    i++; 
 
\t 
 
}); 
 

 
// Trigger "select" on select2 only works in first element. 
 
$('body').on('select2:select', '.in', function() { 
 
\t alert('wii'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script> 
 
<button id="append">Append to Body</button> 
 

 
<!-- First element --> 
 
<p> 
 
    <label for="in-9'">Select2 #9:</label><br> 
 
    <input id="in-9" class="in"><br> 
 
</p>

希望します。