4

jQuery 用の Chosen プラグイン (ここにあります: 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()

それはうまくいきます。select 要素のこれら 3 つのクラスはすべて、#newGroup という div に表示されます。ページには新しいグループを「追加」するボタンがあり、#newGroup div を複製して最初の div のすぐ下に追加します。

同じ要素が含まれています。ただし、複製された div の選択項目に Chosen 機能を追加しようとすると、それらはフリーズします。インターフェイスは最初のものと同じように見えるので、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) と表示されます。

4

4 に答える 4

7

私が思いついた回避策は、Abhinavのものと似ていました。選択したコードを削除しました。選択ボックスから「chzn-done」クラスを削除しました。選択ボックスでdisplay：noneをオフにしてから、選択したものを選択ボックスに再適用しました

$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れているため、すでに存在する選択を複製することはできず、このクラスが設定されていない選択にのみ適用されるようです。つまり、新しいselectを呼び出しても、事実上何も起こりません。chzn-donechosenchosen

chosenグループ全体のクローンを作成しているため、選択は有効になっているように見えます。つまり、clone新しいグループの呼び出し後、すでにchosenインターフェイスが含まれており、selectはすでに非表示になっています。もちろん、chosen新しいグループのインターフェイスはnewにバインドされていませんselect。また、デフォルトでは新しいイベントが追加されないため、クリックしselectても何も変更されません。jQuery.clone

基本的に、jQuery.clone複雑なコンテンツのクローンを作成するために使用しないでください（または、より具体的には、複雑なコンテンツのクローンを作成しないでください）。new-enabled selectを使用して新しい入力グループを作成する場合chosenは、明示的に作成してください。

于 2012-05-24T04:18:12.983 に答える
0

私はグーグルからここにつまずいた。思考は私の.clone()ベースの解決策で答えます。プロジェクトでjqueryクローンを使用し、選択したプラグインを動的に適用するために私が行っていることは次のとおりです。

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 に答える