动态字段上的jQuery x-editable插件？ [英] jQuery x-editable plugin on dynamic fields?

问题描述

我已经制作了一个脚本，可以通过单击按钮添加动态输入，并使用相应的x按钮删除不需要的输入。我需要在每个新创建的动态输入上添加 x-editable 插件。我正在使用x-editable，这样一来，在x-editable弹出窗口的选定选项上，右侧的输入获取一个与选择的选项对应的值。

$ b $我已经使用静态元素，但动态的，我有很大的问题。
首先，与所有html结构一起，所有动态元素的类都使用其 classname +动态字段数生成。正是这样做，配置的Fieldcount： var FieldCount = 1; ，然后部分地生成了html代码，您可以添加类似 class =privacy-dynamic+ FieldCount +。然后第一个动态元素获取名为 privacy-dynamic2 的html代码中的类，第二个获取 privacy-dynamic3 等on。

现在，我的第一个结论是，我需要以某种方式添加一个类似于x-editable的选项，其中我将创建一个相同的 + FieldCount + 所以每个x可编辑的弹出窗口将对应于从左侧而不是一个弹出窗口到所有动态输入的结果输入。

我试图生成一个x-editable脚本，就像我生成我的html结构一样，它没有起作用。愚蠢的尝试，我知道，用脚本生成脚本，但我是绝望的。

真的我不知道如何解决，我有点一个jquery noob，我迷失了。甚至可以解决这个问题吗？

这是当前的情况，您拥有第一个具有x-editable工作的静态字段，而x-editable具有相同结构的动态字段但没有他们的脚本： http://jsfiddle.net/dzorz/QxMs7/

html：

 < div class =container> 
< input type =textclass =main_activityid =main_activityname =main_activityplaceholder =Main activity> 
< div class =parentToDelegate> 
< a href =＃id =privacyclass =privacydata-type =selectdata-pk =1data-value =1data-original-title =选择可见性> public< / a> 
< input type =textid =privacy_resultclass =privacy_resultvalue =1/> 
< / div> 
 
< div class =row> 
< div id =InputsWrapper> 
< / div> 
< / div> 
< div class =row> 
< span id =AddMoreBoxclass =btn btn-info pull-right>< i class =icon-plus>< / i>添加更多< / span> 
< / div> 
  

脚本：

  // x-editable 
 $（'。privacy'）。editable（{
 showbuttons：false，
 unsavedclass：null，
 type：'select'，
 inputclass：'input-medium privacy-select'，
 source：[
 {value：1，text：公共'}，
 {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（）; 
}）; 
 
 //动态字段
 $（document）.ready（function（）{
 
 var MaxInputs = 5; //允许最大输入框
 var InputsWrapper = $（＃InputsWrapper）; //输入框包装ID 
 var AddButton = $（＃AddMoreBox）; //添加按钮ID 
 
 var x = InputsWrapper。 length; // initlal文本框计数
 var FieldCount = 1; //跟踪添加的文本框
 
 $（AddButton）.click（function（e）// on add input按钮单击
 {
 // if（x <= MaxInputs）//最大输入框允许
 // {
 FieldCount ++; //添加文本框
 //添加输入框
 $（InputsWrapper）.append（'\ 
< div> \ 
< input type =textclass =other_activity\ 
 name =other_activityid =other_activity\ 
 placeholder =其他活动style =margin：0px 15px 10px 0px/> \ 
< a href =＃ class =removeclass>< i class =icon-remove icon-r emove-add>< / i>< / a> \ 
< div class =parentToDelegate-dynamic'+ FieldCount +'parent-dynamic> \ 
< data-value =1data-original- title =选择可见性> public< / a> \ 
< input type =textid =privacy-result-dynamic+ FieldCount +'name =privacy-result-dynamic + FieldCount +'class =privacy-result-dynamic'+ FieldCount +'privacy_dynamicvalue =1/> \ 
< / div> \ 
< / div> ）; 
 x ++; // text box increment 
 //} 
 return false; 
}）; 
 
 $（body）。on（click，。removeclass，function（e）{//用户点击删除文本
 if（x> 1）{ 
 $（this）.parent（'div'）。remove（）; //删除文本框
 x--; //递减文本框
} 
 
 $（'。income_count'）。trigger（'change'）; 
 return false; 
}）; 
 
}）; 
  

css：

 code> .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; 
顶部：-5px; 
左：10px; 
 position：relative; 
} 
  

欢迎任何帮助或建议，您可以自由编辑我的jsfiddle并发布

解决方案

我想出了一个解决方案，允许可编辑点击首次点击。

  $（document）.on（'mousemove'，function（）{
 $（'。username'）。editable（）; 
 ...另一个其他字段你也需要应用这个
}）; 
  

只需应用一个 mousemove 事件，因为用户总是要移动鼠标点击字段。这对我来说是完美的。

I have made a script which enables adding of dynamic inputs on click of a button and removing unwanted inputs with a corresponding x button. My need is to add the x-editable plugin on every newly created dynamic input. I'm using x-editable, in such way, that on a selected option from the x-editable popup, an input from the right side gets a value which corresponds to option selected.

I have made that work with static elements but with dynamic ones I have big problems. First of all, together with all html structure, classes of all dynamic elements are generated with its classname + number of dynamic field. precisely I'm doing this with configured Fieldcount: var FieldCount = 1; and then in part where the generation of html code was made you add something like class="privacy-dynamic'+ FieldCount +'". And then the first dynamic element gets the class in html code called privacy-dynamic2 , second gets privacy-dynamic3 and so on.

Now, my first conclusion is that I need somehow to add a similar option to x-editable in which I would create a script with same + FieldCount + so every x-editable pop up would correspond to its 'result input' from left rather than one popup to all dynamically made inputs.

I tried to generate a x-editable script in the same way I generate my html structure and it did not worked. Silly try from me, I know, generating script with script, but I was desperate.

Truly I don't know how it could be solved, I'm a bit of a jquery noob, and I'm lost in it. Can it even be solved somehow?

Here is current situation in which you have the first static field with x-editable working, and dynamic fields with same structure for x-editable but without the script for them: 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>

script:

//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;
}

Any help or advice is welcome, you can edit my jsfiddle freely and post it back

解决方案

I figured out a solution for this that allows the .editable to fire off on the first click.

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

Just apply a mousemove event since a user is always going to have to move their mouse to click on the field. This works perfect for me.

这篇关于动态字段上的jQuery x-editable插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！