我是 jQuery 的新手,所以请放轻松,我有一个表示高级搜索的表单。用户将能够添加行以优化他们的特定搜索。
每一行有 3 个元素:一个复选框和 2 个选择框。
从 fiddle 中可以看出,我正在使用 jquery 克隆该行并将克隆的行放在最后一行之后。
一切正常,除了视觉上我希望复选框使用 Bootstrap-Switch http://www.bootstrap-switch.org/
以及要使用 Selectize 的选择框 https://github.com/brianreavis/selectize.js
现在,当我克隆这些插件未激活的行时,一切正常。 我不知道如何在插入新行后重新呈现或重新激活它们。
这是插件特定的东西吗?或者对 jquery 来说是通用的? 我在这里阅读了很多关于类似事情的答案,但我似乎无法正确理解。
这是 jquery 片段:
$adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {
console.log("Button Clicked", event)
});
$('#addSearchRow').click(function(event){
$('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
// $('.searchByField,.searchOperator').selectize({refreshItems: true});
// $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});
这是 fiddle ,希望它没问题。 http://jsfiddle.net/CkVQr/6/
非常感谢您的帮助。 干杯
最佳答案
插件改变你的 HTML
您可能没有完全意识到您的代码存在两个主要问题:
- 每当您执行
.clone()
时,它只会深度克隆您的 DOM 元素子树,而不是绑定(bind)到克隆元素的任何事件处理程序。 - 您的
.selectize()
插件相当大地改变了表单的HTML,将输入元素转换为其他内容。因此,每当您克隆已经转换的选择过滤器行,并随后想要再次运行.selectize()
时,这个特定的插件将找不到任何合适的输入元素来转换。因此它不会工作。一切看起来都应该如此,但行不通。
可以做什么?
主要思想是,无论何时克隆搜索过滤器行,都必须克隆原始 HTML,而不是在使用插件转换之后。
HTML 模板来拯救
其中一种可能性是稍微更改您的页面(和功能)并将您的搜索过滤器行放在模板中并始终使用它。当您创建第一行时,您应该读取模板(并缓存它)并在您的页面上添加+转换它。当您要添加额外的行时,只需使用相同的缓存模板并再次添加+转换即可。
HTML 模板
<script id="filterRow" type="text/x-template">
<!-- Your filter rown HTML goes in here -->
</script>
一些 Javascript
var cachedTemplate = cachedTemplate || $("#filterRow").html();
...
$('#addSearchRow').click(function(evt) {
var newRow = cachedTemplate.clone(); // clone for reusability
newRow.insertAfter('[data-content=adSearch-3]:last');
newRow.selectize();
...
});
关于javascript - 使用 jQuery 插件 Selectize 和 Bootstrap-Switch 时重新渲染动态元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24351687/