Question

我是jQuery的新手，所以请放心，我有一个代表高级搜索的表单。用户将能够添加行以优化其特定搜索。

每行有3个元素：一个Checkbox＆amp; 2 x选择框从小提琴中可以看出，我使用jquery克隆行并将克隆行放在最后一行之后。

一切正常，除了视觉我希望复选框使用Bootstrap-Switch http://www.bootstrap-switch.org/

使用选择框选择https://github.com/brianreavis/selectize.js

现在，当我克隆这些插件未激活的行时，一切正常。一旦插入新行，我不知道如何重新渲染或重新激活它们。

这是插件特定的吗？或者jquery的普遍性？我已经阅读了关于类似事情的HEAPS答案，但我似乎无法做到正确。

以下是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});
});

这是小提琴，希望它没关系。 http://jsfiddle.net/CkVQr/6/

非常感谢你的帮助。干杯

Answer 1

插件会更改您的HTML

您的代码可能无法完全了解两个主要问题：

每当你执行.clone()时，它只会深层克隆你的DOM元素子树，而不是任何绑定到克隆元素的事件处理程序。
您的.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();
    ...
});

Answer 2

谢谢你的帮助罗伯特，我以前从未使用过html模板。它仍然需要一点时间才能做到正确，但我更新了小提琴，它现在应该正常工作。

我想从表单中的3行开始，以便用户得到这个想法，所以我使用了：

$('#addSearchRow').trigger('click')
$('#addSearchRow').trigger('click');

按钮ID上的

。我已经把它放在那里几次再添加两行。我不确定这是不是很糟糕的做法？

以下是罗伯特建议使用模板的主要代码：

var cachedTemplate = cachedTemplate || $("#searchRowTemplate").html();    
$('#addSearchRow').click(function(event){
    var newRow = $(cachedTemplate).clone();
    console.log(newRow);
    if($('[data-content=adSearch-3]:last').length === 0)
    {
    newRow.insertAfter('[data-content=adSearch-1]') 
}
else
{
newRow.insertAfter('[data-content=adSearch-3]:last');
}
$(".searchByField", newRow).selectize();
$("[data-toggle=switch]", newRow).bootstrapSwitch({
onText: 'AND',
offText: 'OR'
});
});

对于任何有帮助的人来说，这都是小提琴：http://jsfiddle.net/CkVQr/12/

再次感谢

使用jQuery插件Selectize和Bootstrap-Switch时重新渲染动态元素

2 个答案:

插件会更改您的HTML

可以做些什么？

拯救的HTML模板