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>

希望它有帮助！