动态字段上的 jQuery x-editable 插件？

我制作了一个脚本，可以在单击按钮时添加动态输入，并使用相应的 x 按钮删除不需要的输入。我的需要是添加x-可编辑每个新创建的动态输入上的插件。我正在使用 x-editable，以这种方式，在 x-editable 弹出窗口中选择的选项上，右侧的输入会获取与所选选项相对应的值。

我已经在静态元素上做到了这一点，但在动态元素上我遇到了很大的问题。 首先，连同所有的html结构，所有动态元素的类都是以其类名+动态字段数。准确地说，我正在使用配置的 Fieldcount 执行此操作：var FieldCount = 1;然后在生成 html 代码的部分添加类似的内容class="privacy-dynamic'+ FieldCount +'"。然后第一个动态元素获取 html 代码中的类，称为privacy-dynamic2, 第二个得到privacy-dynamic3等等。

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

我尝试以与生成 html 结构相同的方式生成 x-editable 脚本，但它不起作用。我知道，我愚蠢地尝试用脚本生成脚本，但我很绝望。

真的，我不知道如何解决这个问题，我是一个jquery菜鸟，我迷失在其中。它甚至可以以某种方式解决吗？

这是当前情况，其中您有第一个具有 x-editable 工作的静态字段，以及具有相同结构的 x-editable 但没有它们的脚本的动态字段：http://jsfiddle.net/dzorz/QxMs7/ 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;
}

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

我想出了一个解决方案，允许.editable第一次点击时触发。

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

只需申请一个mousemove事件，因为用户总是必须移动鼠标才能单击该字段。这对我来说非常适合。