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

Posted

技术标签:

【中文标题】使用 jQuery Plugin Selectize 和 Bootstrap-Switch 时重新渲染动态元素【英文标题】:Rerender Dynamic Elements when using jQuery Plugin Selectize and Bootstrap-Switch 【发布时间】:2014-08-12 15:40:12 【问题描述】:

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

每行有 3 个元素:一个复选框和 2 个选择框。 从小提琴中可以看出,我正在使用 jquery 克隆该行并将克隆的行放在最后一行之后。

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

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

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

这是插件特定的东西吗?还是对 jquery 有一种通用性? 我已经在这里阅读了关于类似事情的大量答案,但我似乎无法正确理解。

这里是 jquery sn-p:

$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/

非常感谢您的帮助。 干杯

【问题讨论】:

【参考方案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();
    ...
);

【讨论】:

以上是关于使用 jQuery Plugin Selectize 和 Bootstrap-Switch 时重新渲染动态元素的主要内容,如果未能解决你的问题,请参考以下文章

jQuery ListNav Plugin 怎么使用

将 jquery-store-locator-plugin (v2) 与多种表单一起使用

jquery fileupload plugin

使用 jQuery DataTable Buttons Plugin 不显示导出按钮

jquery selected plugin - 使用 php 获取数据

Jquery Filer Plugin - 添加白名单扩展