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

Question

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

我已经用静态元素做了这项工作，但是对于动态元素我有很大的问题。首先，连同所有html结构一起，所有动态元素的类都通过类名+动态字段数生成。正是我这样做与配置Fieldcount：var FieldCount = 1;然后在一部分的HTML代码的一代，你增加了一些像class="privacy-dynamic'+ FieldCount +'"。然后，第一个动态元素将获得名为privacy-dynamic2的html代码的类，第二个获得privacy-dynamic3等等。

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

我试图生成一个x-editable脚本，就像我生成我的html结构一样，它没有奏效。我知道，从我身上试着用脚本生成脚本，但我很绝望。

真的，我不知道它是如何解决的，我是一个jquery noob，我迷失了它。它可以以某种方式解决吗？

这是在你有X-编辑工作的第一静态字段现状，并与相同结构的动态字段进行X编辑，但没有脚本他们：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和后回

Answer 1

你可以把它在动态下地干活调用你的函数是这样的：

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

确保将类.xedit添加到动态字段。

我更新了小提琴，以显示这是如何工作的：http://jsfiddle.net/javimarcos/m7sj2/

您应该删除的动态领域ID（它们都具有相同的ID）。

Answer 2

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

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

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

Answer 3

这样，我们可以添加更多的X-编辑选择框动态

> 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