Question

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

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

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

它包含相同的元素。但是，当我尝试将选择的功能添加到克隆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正在加载，但由于某种原因它不起作用。此外，我不确定这是否有所作为，但当我将鼠标悬停在克隆div的选择元素上时，它表示javascript：void（1），而当我将鼠标悬停在原始文件上时，它表示javascript：void（0）。

Answer 1

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

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

Answer 2

查看chosen source code，您似乎无法克隆已经chosen的选择，因为他们已经设置了chzn-done类，仅chosen适用于没有此类集的选择。这意味着您对新选择的chosen的有效无效。

选择显示为chosen - 已启用，因为您正在克隆整个组。也就是说，在调用clone后，新组已包含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('<p>').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();

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

4 个答案: