動態字段上的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