5

ボタンをクリックして動的入力を追加し、対応する x ボタンで不要な入力を削除できるスクリプトを作成しました。新しく作成されたすべての動的入力にx-editableプラグインを追加する必要があります。x-editableポップアップから選択したオプションで、右側からの入力が選択したオプションに対応する値を取得するように、x-editableを使用しています。

私は静的要素でそれを機能させましたが、動的要素では大きな問題があります。まず、すべての html 構造とともに、すべての動的要素のクラスが、そのクラス名 + 動的フィールドの数で生成されます。正確には、構成された Fieldcount:var FieldCount = 1;でこれを行っています。次に、html コードの生成が行われた部分で、 のようなものを追加しますclass="privacy-dynamic'+ FieldCount +'"。そして、最初の動的要素が と呼ばれる html コードでクラスを取得しprivacy-dynamic2、2 番目の要素が取得privacy-dynamic3されます。

さて、私の最初の結論は、x-editable に同様のオプションを追加する必要があるということです。このオプションでは、 + FieldCount +すべての x-editable ポップアップが、1 つのポップアップではなく左からの「結果入力」に対応するように、同じスクリプトを作成します。すべての動的に行われた入力。

HTML 構造を生成するのと同じ方法で x-editable スクリプトを生成しようとしましたが、うまくいきませんでした。私からのばかげた試み、私は知っています、スクリプトでスクリプトを生成しますが、私は必死でした。

どうすれば解決できるのか本当にわかりません。私は少しjquery初心者で、迷っています。なんとか解決することはできますか？

これは、x-editable が機能する最初の静的フィールドと、x-editable と同じ構造を持つがそれらのスクリプトがない動的フィールドがある現在の状況です: http://jsfiddle.net/dzorz/QxMs7/

html:

<div class="container">    
    <input type="text" class="main_activity" id="main_activity" name="main_activity" placeholder="Main activity">
    <div class="parentToDelegate">
        <a href="#" id="privacy" class="privacy" data-type="select" data-pk="1" data-value="1" data-original-title="Select visibility">public</a>
        <input type="text" id="privacy_result" class="privacy_result" value="1"/>     
    </div>

    <div class="row">
        <div id="InputsWrapper">
        </div>
    </div>
    <div class="row">
        <span id="AddMoreBox" class="btn btn-info pull-right"><i class="icon-plus"></i>Add More</span>
    </div>

脚本：

//x-editable
$('.privacy').editable({
    showbuttons: false,
    unsavedclass: null,
    type: 'select',
    inputclass: 'input-medium privacy-select',
    source: [
        {value: 1, text: 'public'},
        {value: 2, text: 'approved contacts only'},
        {value: 3, text: 'matching contacts'},
        {value: 4, text: 'invisible'}
    ],

});

$(function(){
        $('.parentToDelegate').on('change keyup blur', ".privacy-select", function(){
            $('.privacy_result').val($('.privacy-select').val());
        }).blur();
    });

//dynamic fields
$(document).ready(function() {

var MaxInputs       = 5; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#AddMoreBox"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e)  //on add input button click
{
//         if(x <= MaxInputs) //max input box allowed
//         {
        FieldCount++; //text box added increment
        //add input box
        $(InputsWrapper).append('\
        <div>\
        <input type="text" class="other_activity"\
        name="other_activity" id="other_activity"\
        placeholder="Other activity" style="margin:0px 15px 10px 0px"/>\
        <a href="#" class="removeclass"><i class="icon-remove icon-remove-add"></i></a>\
            <div class="parentToDelegate-dynamic'+ FieldCount +' parent-dynamic">\
                <a href="#" id="privacy-dynamic" class="privacy-dynamic'+ FieldCount +'" data-type="select" data-pk="1" data-value="1" data-original-title="Select visibility">public</a>\
                <input type="text" id="privacy-result-dynamic'+ FieldCount +'" name="privacy-result-dynamic'+ FieldCount +'" class="privacy-result-dynamic'+ FieldCount +' privacy_dynamic" value="1"/>\
            </div>\
        </div>');
        x++; //text box increment
//         }
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x > 1 ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
    }

            $('.income_count').trigger('change');
            return false;
});

});

CSS:

.container{
   padding-top:100px
}

.privacy_result, .privacy_dynamic{
    width: 40px;
}

.main_activity, .other_activity{
    width: 140px;
}

.parentToDelegate{
    display:inline;
}

.icon-remove-add{
    margin-left: -10px;
    margin-top: -8px;
}

.parent-dynamic{
    display: inline;
    top: -5px;
    left: 10px;
    position: relative;
}

ヘルプやアドバイスは大歓迎です。私のjsfiddleを自由に編集して投稿することができます

4

3 に答える 3

2

.editable最初のクリックで起動できるようにする解決策を見つけました。

$(document).on('mousemove', function() {
    $('.username').editable();
    ... and another other fields you need to apply this too.
});

mousemoveユーザーは常にマウスを動かしてフィールドをクリックする必要があるため、イベントを適用するだけです。これは私にとって完璧に機能します。

于 2015-05-03T23:58:31.377 に答える
0

このようにして、x-editable selectbox を動的に追加できます

> Blockquote
/***
$.fn.editable.defaults.mode = 'popup';
$(document).on('click', '.xeditable_option',function (e) {
$(this).editable({source : [{value : '',text : 'Select Option'},
<?php foreach($option_array as $option_list){?>
{value : '<?php echo $option_list['option_id'];?>', text : '<?php echo $option_list['option_name'];?>'  },<?php }?> ]});
});
**/
> Blockquote
于 2016-06-20T07:42:26.883 に答える
0

次のように関数を呼び出す動的フィールドで機能させることができます。

$(document).on('click', '.xedit',function (e) { e.preventDefault(); $(this).editable(your function here); });

クラス .xedit を動的フィールドに必ず追加してください。

これがどのように機能するかを示すためにフィドルを更新しました: http://jsfiddle.net/javimarcos/m7sj2/

動的フィールドの ID を削除する必要があります (すべて同じ ID です)。

于 2014-07-24T10:37:31.933 に答える