我正在嘗試使用 jQuery 的 onClick()附加Select2。我的 HTML 代碼是<td id="47">Bob SMith and admin</td>. 我的 jQuery 代碼如下所示。
(function($) {
$(document).ready(function () {
$(".volunteer").on("click", function () {
$(this).html(`<select name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>`);
});
$('.js-example-basic-multiple').select2();
});
})(jQuery)
但這行不通。
uj5u.com熱心網友回復：
有兩個問題會阻止選擇加載。
select2 的初始化在 click 事件之外，因此它發生在頁面加載之前 select 元素存在時。這必須在將選擇添加到 DOM 之后發生。
$('.js-example-basic-multiple').select2();單擊事件在類“志愿者”上注冊，并且在單元格上的任何單擊都會執行此函式，即使在加載選擇之后也是如此。當您嘗試選擇一個選項時，這會導致選擇重新加載，從而導致該選項丟失。要解決此問題，您可以檢查選擇是否已加載。
if(!$(this).has("select").length) {
(function($) {
$(document).ready(function() {
var state = "";
$(".volunteer").on("click", function(event) {
// Check if select is already loaded
if(!$(this).has("select").length) {
// Populate select element
$(this).html(`<select name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>`);
// Initialise select2
$(this).children("select").select2();
}
});
});
})(jQuery).js-example-basic-multiple {
width: 200px;
}
thead{
font-weight: bold;
}
table, th, td {
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<table>
<thead>
<tr>
<td>Table Header 1</td>
<td>Table Header 2</td>
</tr>
</thead>
<tbody>
<tr>
<td class="volunteer" id="47">Click Me</td>
<td class=""></td>
</tr>
<tr>
<td class="volunteer" id="48">Click Me</td>
<td class=""></td>
</tr>
</tbody>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387821.html
標籤：查询 点击 jquery-select2