1

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

每行有 3 个元素：一个复选框和 2 个选择框。
从小提琴中可以看出，我正在使用 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});
});

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

非常感谢您的帮助。干杯

4

1 回答 1

1

插件改变你的 HTML

您的代码可能没有完全意识到两个主要问题：

  1. 每当您这样做时，.clone()它只会深度克隆您的 DOM 元素子树，而不是绑定到克隆元素的任何事件处理程序。
  2. 您的.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();
    ...
});
于 2014-06-23T09:58:37.457 回答