गतिशील क्षेत्रों पर jQuery एक्स-संपादन योग्य प्लगइन?

Question

मैंने एक स्क्रिप्ट बनाई है जो बटन के क्लिक पर गतिशील इनपुट जोड़ने और संबंधित एक्स बटन के साथ अवांछित इनपुट को हटाने में सक्षम बनाता है। मेरी ज़रूरत है कि प्रत्येक नव निर्मित गतिशील इनपुट पर x-editable प्लगइन जोड़ें। मैं एक्स-संपादन योग्य का उपयोग कर रहा हूं, इस तरह, एक्स-संपादन योग्य पॉपअप से चयनित विकल्प पर, दाईं ओर से एक इनपुट प्राप्त होता है जो चयनित विकल्प से मेल खाता है।

मैंने स्थिर तत्वों के साथ यह काम किया है लेकिन गतिशील लोगों के साथ मुझे बड़ी समस्याएं हैं। सबसे पहले, सभी एचटीएमएल संरचना के साथ, सभी गतिशील तत्वों के वर्ग कक्षा नाम + गतिशील क्षेत्र के साथ उत्पन्न होते हैं। ठीक है, मैं इसे कॉन्फ़िगर किया गया फ़ील्डकाउंट: var FieldCount = 1; और फिर उस भाग में जहां HTML कोड की पीढ़ी बनाई गई थी, आप class="privacy-dynamic'+ FieldCount +'" जैसे कुछ जोड़ते हैं। और फिर पहला गतिशील तत्व एचटीएमएल कोड में कक्षा को privacy-dynamic2 कहा जाता है, दूसरा privacy-dynamic3 और इसी तरह से मिलता है।

अब, मेरा पहला निष्कर्ष यह है कि मुझे x-संपादन योग्य के लिए एक समान विकल्प जोड़ने की ज़रूरत है जिसमें मैं एक ही + FieldCount + के साथ एक स्क्रिप्ट तैयार करूंगा ताकि प्रत्येक एक्स-संपादन योग्य पॉप अप बाईं ओर से 'परिणाम इनपुट' के अनुरूप होगा सभी गतिशील रूप से किए गए इनपुट के लिए एक पॉपअप की बजाय।

मैंने एक एक्स-संपादन योग्य स्क्रिप्ट उत्पन्न करने की कोशिश की जिस तरह से मैं अपनी एचटीएमएल संरचना उत्पन्न करता हूं और यह काम नहीं करता है। मूर्खता से मुझे कोशिश करो, मुझे पता है, स्क्रिप्ट के साथ स्क्रिप्ट उत्पन्न, लेकिन मैं बेताब था।

वास्तव में मुझे नहीं पता कि इसे कैसे हल किया जा सकता है, मैं एक jquery noob हूँ, और मैं इसमें खो गया हूँ। क्या इसे किसी भी तरह हल किया जा सकता है? http://jsfiddle.net/dzorz/QxMs7/

एचटीएमएल:

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

}); 

सीएसएस:

.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/

आप गतिशील क्षेत्र में आईडी को निकाल देना चाहिए (वे सभी एक ही आईडी है)।

Answer 2

मैंने इस के लिए एक समाधान निकाला जो पहले क्लिक पर .editable को आग लगने की अनुमति देता है।

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

बस एक mousemove घटना के बाद से एक उपयोगकर्ता हमेशा अपने माउस को स्थानांतरित करने के लिए मैदान पर क्लिक करने के लिए जा रहा है लागू होते हैं। यह मेरे लिए सही काम करता है।

Answer 3

इस तरह हम अधिक एक्स-संपादन योग्य selectbox आप jQuery livequery के बारे में पढ़ा गतिशील

> 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