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

jQuery的Chosen插件（在这里找到： http ： //harvesthq.github.com/chosen/ ）增加了选择HTML元素的额外function。 我可以使用以下代码将function添加到页面上加载的初始元素：

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

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

它包含相同的元素。 但是，当我尝试将选择的function添加到克隆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(); }) } 

警报，测试和测试2都会出现。 所以我认为jQuery正在加载，但由于某些原因它不起作用。 此外，我不确定这是否有所作为，但当我将鼠标hover在克隆div的选择元素上时，它表示javascript：void（1），而当我将鼠标hover在原始文件上时，它表示javascript：void（0）。

Answer 1

我提出的工作与Abhinav相似。 我删除了选择生成的代码。 从selectbox中删除了“chzn-done”类。 关闭显示：在选择框上没有，然后重新应用选择到选择框

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

Answer 2

查看所选择的源代码 ，似乎您不能只是克隆已经chosen ，因为它们已经有了chzn-done类集，并且chosen仅适用于没有此类集的选择。 这意味着您对新选择的选择有效无效。

由于您正在克隆整个组，因此选择显示为已启用。 也就是说，在调用clone new group之后已经包含一个chosen接口，并且select已经被隐藏了。 当然，新组中chosen接口不受新select约束。 此外，单击select不会更改任何内容，因为默认情况下jQuery.clone不会添加新事件。

基本上，您永远不应该使用jQuery.clone来克隆复杂内容（或者更具体地说，您根本不应该克隆复杂内容）。 如果要使用新chosen启用选择创建新输入组，只需显式执行即可。

Answer 3

我只是从谷歌偶然发现了这里。 思考将回复我的基于.clone()的解决方案。 以下是我在项目中使用jquery clone并动态应用所选插件的方法：

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

对我很有用。 删除'chzn-done'类是必需的步骤，否则选择的插件将无法在其上激活。

Answer 4

它的真实选择不适用于克隆输入。 让它运作的另一种方法是

  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();