4

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 中的选择项时，它们被冻结。该界面看起来与第一个相同，因此正在加载选择，但是当我单击它们时没有任何反应。这是代码：

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

4

4 回答 4

7

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

$j("#masterCats_chzn").remove();
$j("#masterCats").css({display: "inline-block"}).removeClass("chzn-done").addClass("chsn");
$j(".chsn").chosen();
于 2012-12-07T19:43:47.320 回答
1

查看所选的源代码，您似乎不能只克隆已经是的选择chosen，因为它们已经具有自己的chzn-done类集，并且chosen仅适用于没有此类集的选择。这意味着您chosen对新选择的调用实际上没有任何作用。

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

基本上，您永远不应该使用jQuery.clone来克隆复杂的内容（或者，更具体地说，您根本不应该克隆复杂的内容）。如果你想用一个新的chosen-enabled 选择创建一个新的输入组，只需明确地做。

于 2012-05-24T04:18:12.983 回答
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'类是强制性的步骤，否则选择的插件将无法激活它。

于 2012-10-07T04:44:57.627 回答
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();
于 2012-11-13T12:00:31.260 回答