如何将Chosen插件添加到动态创建/克隆的CSS div中？

Question

选用的jQuery插件(可以在这里找到:http://harvesthq.github.com/chosen/)为select HTML元素增加了额外的功能。我可以通过以下代码将该功能添加到页面上加载的初始元素中:

$(document).ready(function(){
$(".chosenProperties").data("placeholder","Select properties...").chosen();
$(".chosenType").data("placeholder","Type...").chosen();
$(".chosenInstance").data("placeholder","Instance...").chosen()

可以。这三个类别的选择元素都出现在一个名为 #newGroup 的 div 中。页面上有一个按钮“添加”新组，它克隆 #newGroup div 并将其添加到第一个下方。

它包含相同的元素。但是，当我尝试将 Chosen 功能添加到克隆的 div 中的选择项时，它们被冻结了。界面与第一个界面相同，因此 Chosen 已加载，但当我单击它们时，什么也不发生。以下是代码：

    $( '#swl-add-group-button' ).click( function() {
    //addGroupToGUI();
    createClassAddRow();

} );


var rowNum = 0;     
function createClassAddRow() {
    rowNum++;
    newRow = jQuery('#newGroup').clone().css('display', '');
    newHTML = newRow.html().replace(/0/g, 1);
    newRow.initializeJSElements();
    newRow.html(newHTML);
    newRow.initializeJSElements();
    jQuery('#mainTable').append(newRow);
    addGroup(newRow);
}

jQuery.fn.initializeJSElements = function (){
    this.find(".chosenProperties").each( function() {
        alert('test');
        if($(".chosenProperties").data("placeholder", "Select properties...").chosen()){
            alert('test2');
        }
    });
    this.find(".chosenType").each( function() {
        jQuery(this).data("placeholder","Type...").chosen();
    });
    this.find(".chosenInstance").each( function(){
        jQuery(this).data("placeholder", "Instance...").chosen();
    })

}

两个警告框，test和test2都出现了。所以我认为jQuery已经加载了，但出于某种原因它没有工作。此外，我不确定这是否有区别，但当我悬停在克隆的div的选择元素上时，它会显示javascript:void(1)，而当我悬停在原始元素上时则显示javascript:void(0)。

- dysruption

Answer 1

我想到的解决办法与 Abhinav 的类似。 我删除了 Chosen 生成的代码。 从选择框中去掉了 "chzn-done" 类。 关闭了选择框上的 display:none，然后重新应用了 Chosen 到选择框中。

$j("#masterCats_chzn").remove();
$j("#masterCats").css({display: "inline-block"}).removeClass("chzn-done").addClass("chsn");
$j(".chsn").chosen();

- Patrick Barrett

Answer 2

从所选源代码来看，似乎你不能克隆已经被chosen选择的选项，因为它们已经设置了chzn-done类，而chosen仅适用于没有设置此类的选项。

这意味着你在新的选择器上调用chosen实际上什么也没做。由于你正在克隆整个组，因此该选择器似乎已启用chosen。也就是说，在调用clone之后，新组已经包含了一个chosen接口，并且select已经隐藏。当然，新组中的chosen接口未绑定到新的select。 此外，单击select不会改变任何内容，因为jQuery.clone默认不添加新事件。

基本上，您不应该使用 jQuery.clone 来克隆复杂的内容（或者更具体地说，根本不应该克隆复杂的内容）。如果您想要创建一个新的输入组，并带有一个新的启用了 chosen 的选择器，那么请明确地执行此操作。

- penartur

---

最好的方法是怎样去做呢？再次感谢。 - dysruption

明确地做它。也就是说，创建一个新的“select”，然后将chosen应用于它。 - penartur

Answer 3

确实，对于克隆的输入，chosen不起作用。让它正常工作的另一种方法是

  clonedInput = $('#fullForm').clone;
    clonedInput.find('div.chzn-container').remove();
    clonedInput.find('selectBoX.withClass').show();
    clonedInput.find('selectBoX.withClass').removeAttr('id');
    clonedInput.find('selectBoX.withClass').removeAttr('data-placeholder');
    clonedInput.find('selectBoX.withClass').removeClass('chzn-done');
    clonedInput.find('selectBoX.withClass').chosen();

- Asif

Answer 4

我刚从谷歌上偶然发现了这里。想用我的.clone()解决方案回复一下。以下是我在项目中使用jQuery克隆并动态应用所选插件的方法：

html = '';
selectbox = $('#select-box').clone();
selectbox.removeAttr('id').attr({
    'data-placeholder': '(optional)'
}).removeClass('chzn-done').css('display','block');
html += selectbox.wrap('<p>').parent().html();

对我来说非常有效。删除'chzn-done'类是必要的步骤，否则选择插件将无法在其上激活。

- Abhinav Singh