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

Question

The Chosen Plugin for 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 功能添加到克隆的 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();