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>

希望它有幫助！