我无法获得有关动态添加的引导程序选择元素的警报
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<script>
$( document ).ready(function() {
$('#days').multiselect({
includeSelectAllOption: true
});
var i = 1;
$('#btnAddAnother').click(function(){
var clone_multiselect = $("#days").clone();
clone_multiselect.attr('id', 'days' + i);
clone_multiselect.appendTo(".multiselect_container");
$(clone_multiselect).multiselect({
includeSelectAllOption: true
});
i++;
});
$('#btnGetSelected').click(function() {
$('.results').empty();
$('select.multiselect').each(function(){
var id = $(this).attr('id');
var selected_option_selector = '#' + id + ' option:selected';
var result_str = '<b>' + id + '</b>: ';
$(selected_option_selector).each(function(){
result_str += $(this).text() + ' - ' + $(this).val() + ', ';
});
result_str = result_str.substring(0, result_str.length - 2);
result_str += '<br />';
$('.results').append(result_str);
});
});
$(document.body).on("click","select.multiselect",function(){
alert("hello");
});
});
</script>
</head>
<body>
<div class="multiselect_container">
<select id="days" class="multiselect" multiple="multiple">
<option value="1">thursday</option>
<option value="2">sunday</option>
<option value="3">monday</option>
<option value="4">tuesday</option>
<option value="5">friday</option>
</select>
</div>
<br />
<button id="btnGetSelected" class="btn btn-primary">Get Selected</button>
<button id="btnAddAnother" class="btn btn-primary">+ Add Another Set OF Hourse</button>
<div class="results"></div>
</body>
</html>
您应该注册您的事件之后您创建的元素。在创建之后，您应该将显示警报的事件侦听器放入创建您的select元素的事件侦听器中。
我希望它有所帮助！
编辑：这是我编写的代码，我通过“ change”更改“ click”事件，因为引导多重选择似乎覆盖了click事件。当您单击某个选项时，警报会显示出来，我不知道它是否是您想要的。
var i = 1;
$('#btnAddAnother').on('click', function(){
var clone_multiselect = $("#days").clone();
clone_multiselect.attr('id', 'days' + i);
clone_multiselect.appendTo(".multiselect_container");
$(clone_multiselect).multiselect({
includeSelectAllOption: true
});
$(clone_multiselect).on("change",function(){
alert("hello");
});
i++;
});
$('#btnGetSelected').click(function() {
$('.results').empty();
$('select.multiselect').each(function(){
var id = $(this).attr('id');
var selected_option_selector = '#' + id + ' option:selected';
var result_str = '<b>' + id + '</b>: ';
$(selected_option_selector).each(function(){
result_str += $(this).text() + ' - ' + $(this).val() + ', ';
});
result_str = result_str.substring(0, result_str.length - 2);
result_str += '<br />';
$('.results').append(result_str);
});
});
答案1
确保您正在使用适当的类。custom-select
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
答案2
如果绝对必须，另一种解决方法是创建一个更改侦听器，侦听更改，然后初始化multi-select。
$('#days').change(function(){
$(clone_multiselect).multiselect({includeSelectAllOption: true});
});