jQuery x-editable plugin on dynamic fields?

Question

Zrobiłem skrypt, który umożliwia dodawanie wejść dynamicznych po kliknięciu przycisku i usuwanie niechcianych wejść za pomocą odpowiedniego przycisku x. Moją potrzebą jest dodanie wtyczki x-editable na każdym nowo utworzonym wejściu dynamicznym. Używam x-editable, w taki sposób, że na wybranej opcji z wyskakującego okna x, wejście z prawej strony otrzymuje wartość, która odpowiada wybranej opcji.

Wykonałem tę pracę z elementami statycznymi, ale z dynamicznymi mam duże problemy. Przede wszystkim, wraz ze wszystkimi strukturami HTML, klasy wszystkich dynamicznych elementów są generowane z jego nazwą + numerem pola dynamicznego. właśnie robię to ze skonfigurowanym Fieldcount: var FieldCount = 1;, a następnie w części, w której wygenerowano kod html, dodajesz coś takiego jak class="privacy-dynamic'+ FieldCount +'". I wtedy pierwszy element dynamiczny dostaje klasę w kodzie html o nazwie privacy-dynamic2, druga otrzymuje privacy-dynamic3 i tak dalej.

Pierwszym moim wnioskiem jest to, że muszę jakoś dodać podobną opcję do x-editable, w której utworzyłbym skrypt z tym samym + FieldCount +, więc każde x-edytowalne okienko pop-up odpowiadałoby "wprowadzeniu wyniku" od lewej zamiast jednego wyskakującego okienka dla wszystkich dynamicznie wprowadzanych danych wejściowych.

Próbowałem wygenerować skrypt edytowalny x w ten sam sposób, w jaki generuję strukturę HTML i nie zadziałało. Głupio postarajcie się ode mnie, wiem, generując scenariusz ze scenariuszem, ale byłem zdesperowany.

Naprawdę nie wiem, jak to można rozwiązać, jestem trochę jobery noob, i jestem zagubiony w tym. Czy uda się to jakoś rozwiązać?

Oto obecną sytuację, w której masz pierwsze statycznego pola z X-edycji roboczych, dynamicznych pól o tej samej strukturze X-edycji, ale bez skryptu dla nich 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> 

scenariusz:

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

Każda pomoc lub rada jest mile widziane, można edytować jsfiddle swobodnie i umieścić go z powrotem

Answer 1

Można zrobić to praca na polach dynamicznych nazywając swoją funkcję tak:

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

Pamiętaj, aby dodać klasę .xedit do pól dynamicznych.

zaktualizowałem swój skrzypce, aby pokazać jak to działa: http://jsfiddle.net/javimarcos/m7sj2/

Należy usunąć identyfikator w polach dynamicznych (wszystkie mają ten sam identyfikator).

Answer 2

Wymyśliłem rozwiązanie, które pozwala .editable wystrzelić za pierwszym kliknięciem.

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

Wystarczy zastosować mousemove zdarzenie ponieważ użytkownik zawsze będzie musiał przenieść swoje myszy na polu. Działa to idealnie dla mnie.

Answer 3

W ten sposób możemy dodać więcej X edycji selectbox dynamicznie

> 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