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

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

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

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

我尝试以与生成 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并将其发布回来

请您参考如下方法:

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

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

只需应用 mousemove 事件，因为用户始终需要移动鼠标才能单击该字段。这对我来说非常适合。