Question

我对这种形式有些不满，我真的很感激一些帮助。

安装customSelect（）jquery插件后，我无法再在表单上选择克隆的选择框元素。

例如，请转到...

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

点击第二张幻灯片＆gt;＆gt;点击“添加包”按钮＆gt;＆gt;尝试更改其中一个克隆的选择框值。

有没有人对这是为什么有任何建议？为了解决这个问题，我有点压力。

提前致谢。

Answer 1

您正在单独的脚本中运行.customSelect（）标记上一页到表单脚本的其余部分。所以这是当前的事件顺序：

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

重要的是要注意，在执行此操作时，您不是复制事件侦听器，而是复制元素。现在，即使您在克隆时再次运行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/

Answer 2

您还可以清理插件添加的元素，然后再次启动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

jquery customSelect插件安装后无法选择克隆元素

2 个答案: