如何將Chosen Plugin添加到動態創建/克隆的CSS div中？

jQuery插件（在這裏找到：http://harvesthq.github.com/chosen/）增加了額外的功能來選擇HTML元素。我可以使用以下代碼將功能添加到頁面上加載的初始元素：如何將Chosen Plugin添加到動態創建/克隆的CSS div中？

$(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中的選定項目時，它們被凍結。該界面看起來與第一個相同，所以選擇正在加載，但是當我點擊它們時，什麼也沒有發生。以下是代碼：

$('#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）。

來源

2012-05-09 dysruption

望着chosen source code看來，你不能只是複製已經一直chosen的選擇，因爲他們已經有了自己的chzn-done類集，並chosen僅適用於不具備該類集選擇。這意味着您對新選擇的chosen的呼叫無效。

此時會出現選擇爲chosen使能的，因爲你是克隆整個組。也就是說，在調用clone新組已包含一個chosen接口，select已經隱藏。當然，新組中的chosen接口沒有綁定到新的select。此外，單擊select不會更改任何內容，因爲jQuery.clone默認情況下不會添加新事件。

基本上，你不應該使用jQuery.clone克隆複雜的內容（或者更具體地說，你不應該克隆複雜的內容的話）。如果要使用新的chosen啓用的選擇創建新的輸入組，只需明確執行。

來源

2012-05-24 04:18:12 penartur

什麼會去這樣做，最好的方法是什麼？再次感謝。 – dysruption

明確地做到這一點。也就是說，要創建一個新的'select'，然後將**選中**應用於它。 – penartur

我只是偶然在這裏從谷歌。思想會回覆我的基於.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'類是強制性步驟，否則所選插件將無法在其上激活。

來源

2012-10-07 04:44:57

其真正的，對於克隆的輸入被選擇不工作。一個不同的方法來得到它的工作是

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

來源

2012-11-13 12:00:31 Asif

我想出的工作是類似於阿比納夫的。我刪除了選擇生成的代碼。從選擇框中剝離「chzn-done」類。熄滅顯示：無在選擇框，再重新選擇的選擇框

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

來源

2012-12-07 19:43:47

如何將Chosen Plugin添加到動態創建/克隆的CSS div中？

回答

相關問題