如何添加选择插件动态创建/克隆CSS div？ [英] How to add Chosen Plugin to dynamically created / cloned CSS div?

问题描述

jQuery的Chosen插件（位于： http://harvesthq.github.com/chosen/）添加了额外的功能来选择HTML元素。我可以通过以下代码将功能添加到页面上加载的初始元素：

The Chosen Plugin for jQuery (found here: http://harvesthq.github.com/chosen/ ) adds extra functionality to select HTML elements. I can add the functionality to the initial elements loaded on the page with the following code:

$(document).ready(function(){
$(".chosenProperties").data("placeholder","Select properties...").chosen();
$(".chosenType").data("placeholder","Type...").chosen();
$(".chosenInstance").data("placeholder","Instance...").chosen()

这个工作方式，所有三个select元素类都出现在一个叫做#newGroup的div中， 一个新的组，它克隆了#newGroup div并将其添加到第一个下面。

That works. All three of those classes of select elements appear in a div called #newGroup. There is a button the page that "adds" a new group, which clones the #newGroup div and adds it right beneath the first.

它包含相同的元素。但是，当我尝试添加Chosen功能接口是冻结的，接口看起来和第一个一样，所以Chosen正在加载，但是当我点击它们什么也没有发生。这是代码：

It contains the same elements. However, when I try to add the Chosen functionality to the select items in the cloned div, they are frozen. The interface looks the same as the first one, so Chosen is being loaded, but when I click them nothing happens. Here is the code:

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

Both alerts, test and test2, appear. So I think the jQuery is getting loaded, but it's not working for some reason. Also, I'm not sure if this makes a difference, but when I hover over the cloned div's select elements it says javascript:void(1) whereas when I hover over the original it says javascript:void(0).

推荐答案

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

The work around I came up with was similar to Abhinav's. I removed the Chosen generated code. Stripped the "chzn-done" class from the selectbox. Turned off display:none on the selectbox and then reapplied chose to the selectbox

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

这篇关于如何添加选择插件动态创建/克隆CSS div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！