1

我对这种形式有点困惑，我真的很感激一些帮助。

安装 customSelect() jquery 插件后，我不再能够在我的表单上选择克隆的选择框元素。

例如，转到...

http://gator1016.hostgator.com /~tamarind/index.php/en/book-now.html

单击第二张幻灯片>>单击“添加包”按钮>>尝试更改克隆的选择框值之一。

有人对为什么会这样有任何建议吗？我有点压力要解决这个问题。

提前致谢。

4

2 回答 2

0

您在表单脚本其余部分之前的单独脚本标签中运行 .customSelect() 。所以这是当前的事件顺序：

  1. customSelect 采用所有给定的选择并<span>在每个选择旁边附加一个可自定义的（这是您为实现所需外观而设置的样式）。它还将事件侦听器附加到这些跨度上，以便它们可以与相应的选择元素正确交互。
  2. 用户单击“添加另一个包”，您克隆整个表单元素块，包括插件附加的自定义跨度。

重要的是要注意，在这样做时，您不会复制事件侦听器，而只是复制元素。现在，即使您在克隆时再次运行 customSelect，您也可能会遇到某种问题，因为原始跨度仍然存在。

您的问题的解决方案是保留对尚未应用 customSelect 的表单块克隆的引用。然后每次插入新的表单块时，都需要将 customSelect 应用于“vanilla”表单块。

这是为您提供的简化示例

HTML

<form action="" id="myForm">
    <div id="formBlock">
        <select><option>one</option><option>two</option></select>
    </div>
</form>

<button id="addNew">add new</button>

jQuery

//do this first:
var formBlock = $('#formBlock').clone();

//now .customSelect();
$('#formBlock select').customSelect();


$('#addNew').click(function(e){
    e.preventDefault();
    var newFormBlock = formBlock.clone().appendTo('#myForm'); //clone the reference to un-modified form block!!!
    newFormBlock.attr({
        id:'' //dont want duplicate id's
    });
    newFormBlock.find('select').customSelect();
});

演示：http: //jsfiddle.net/adamco/ZZGJZ/1/

于 2013-08-02T13:59:37.507 回答
0

您还可以清理插件添加的元素，然后再次启动 customSelect：

    $('form').find('span.customselect').remove(); //remove the span
    $('form').find('select.hasCustomSelect').removeAttr("style"); //clean inline style
    $('form select').customSelect( { customClass: "customselect" } ); // fire again customSelect
于 2016-02-10T21:24:41.320 回答