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

时间:2012-05-09 20:11:34

标签: jquery css jquery-chosen

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)。

4 个答案:

答案 0 :(得分:7)

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

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

答案 1 :(得分:1)

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

选择显示为chosen - 已启用,因为您正在克隆整个组。也就是说,在调用clone后,新组已包含chosen接口,select已隐藏。当然,新组中的chosen接口未绑定到新select。 此外,点击select不会改变任何内容,因为jQuery.clone默认情况下不会添加新事件。

基本上,您不应该使用jQuery.clone来克隆复杂内容(或者更具体地说,您根本不应该克隆复杂内容)。如果您想创建一个新的chosen启用选择的新输入组,请明确地执行此操作。

答案 2 :(得分:0)

我只是从谷歌偶然发现了这里。思考将回复我基于.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'类是必需的步骤,否则选择的插件将无法在其上激活。

答案 3 :(得分:0)

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

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