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

Question

选择的 jQuery 插件(可在此处找到: 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()

这有效。所有这三个类的选择元素都出现在名为#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();
    })

}

两个警报 test 和 test2 都会出现。所以我认为 jQuery 正在加载，但由于某种原因它不起作用。另外，我不确定这是否会产生影响，但是当我将鼠标悬停在克隆的 div 的选择元素上时，它会显示 javascript:void(1)，而当我将鼠标悬停在原始元素上时，它会显示 javascript:void(0)。

Answer 1

我想出的解决方案与 Abhinav 的类似。我删除了选择的生成代码。从选择框中删除了“chzn-done”类。关闭选择框上的显示:无，然后将选择重新应用到选择框

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