小提琴:http://jsfiddle.net/A4sqY/
修改了SA上的一些代码,用于克隆搜索过滤器。试图将搜索过滤器块添加到jQMobile应用程序,代码似乎不确定为什么它只在第一个实例上触发,似乎无法绑定到动态创建的搜索过滤器克隆。
<div data-role="collapsible" data-theme="d" data-collapsed-icon="search" data-expanded-icon="search" class="ui-icon-nodisc" data-iconshadow="false">
<h3>Search</h3>
<form action="" id="search" method="POST" novalidate="novalidate">
<div class="js-selectblock">
<div class="js-select">
<select name="select2[]" class="mySelect" >
<option value="1" selected="selected" > Search1</option>
<option value="2" >Search2</option>
<option value="3" >Search3</option>
</select>
<span class="closeselect">X</span>
</div>
</div>
<input type="submit" value="submit">
<div id="addmore">
Add another filter
</div>
</form>
</div>
克隆按预期运行,删除过滤器仅绑定到初始过滤器。
$(function(){
$('#addmore').on('click', function(){
if($('.closeselect').length < $('.js-select:first option').length) {
$('.js-selectblock > .js-select:first').clone().appendTo('.js-selectblock');
$('.mySelect:not(:last) > option:selected').each(function () {
var disableOption = $(this).val();
$('.mySelect:last > option').each (function () {
if (disableOption === $(this).val()) {
$(this).attr('disabled', 'disabled');
}
});
});
$('.mySelect:last > option:not(:disabled):first').attr('selected', 'selected');
disableSelectedOption();
}
if($('.closeselect').length >= $('.js-select:first option').length) {
$('#addmore').hide();
}
});
$('.closeselect').on('click', function(){
console.log('close click');
// if($('.closeselect').length > 1) {
// console.log('close click');
// $(this).parent().remove();
// disableSelectedOption();
// $('#addmore').show();
// }
});
$('.mySelect').on('change', function () {
disableSelectedOption();
});
function disableSelectedOption() {
$('.mySelect > option').each(function () {
$(this).removeAttr('disabled');
});
$('.mySelect > option:selected').each(function () {
var disableOption = $(this).val();
$('.mySelect > option:not(:selected)').each (function () {
if (disableOption === $(this).val()) {
$(this).attr('disabled', 'disabled');
}
});
});
}
});
答案 0 :(得分:2)
您必须使用委托来添加动态内容:
$('form').on('click','.closeselect', function(){...});
$('form').on('change','.mySelect', function () {...});