jQuery UI draggable नव निर्मित DOM तत्व

Question

पर काम नहीं कर रहा है मेरे पास कुछ डीओएम तत्व है जो jQuery UI का उपयोग करके खींचने योग्य है। सभी ठीक काम कर रहे हैं लेकिन जब मैं jQuery का उपयोग करके कुछ तत्व बनाता हूं, तो वे बिल्कुल ड्रैग करने योग्य नहीं होते हैं। i.e

$('div.draggable').draggable(); //Existing element , it works :) 
$('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :(

अग्रिम धन्यवाद !!!

मैं यह कोशिश कर रहा हूँ:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('body').append('<p class="draggable">Newly Created Paragraph</p>'); 
     $('p.draggable').draggable(); **//This is not working** 
    }); 
</script> 

हालांकि किसी तरह यह काम कर रहा है

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('body').append('<p class="draggable">Newly Created Paragraph</p>') 
       .find('p.draggable').draggable(); **This is working** 

    }); 
</script> 

Answer 1

आप खींचने योग्य कॉल करने के लिए() के बाद नव निर्मित तत्व डोम में डाला जाता है की जरूरत है।

कारण यह है कि कोड की पहली पंक्ति केवल मौजूदा तत्वों से मेल खाती है। नए बनाए गए तत्वों को उस पहली पंक्ति में नहीं चुना गया है।

Answer 2

असल में ऐसा लगता है कि ड्रैगगेबल में समस्या है। जब आप कुछ htmlTag जोड़ते हैं और फिर इसे खोजने का प्रयास करते हैं और इसे खींचने योग्य बनाते हैं, तो यह इसे पहचाना नहीं जाता है। createElement का उपयोग करके एक नया तत्व बनाने का प्रयास करें और फिर इसे संलग्न करें। आशा है कि यह काम करता है

var newEle = document.createElement('p'); 
$(newEle).attr("class","draggable").draggable(); 
$('body').append($(newEle)); 

या

var newEle = document.createElement('p'); 
$(newEle).attr("class","draggable"); 
$('body').append($(newEle)); 
$('p.draggable').draggable(); 

Answer 3

मैं इस समस्या थी लेकिन यह पढ़ने के बाद मैं इसे हल कर सकते हैं।

$(".in-browser").each(function(){ 
     $(this).dblclick(function(){ 
      var browseIn = $(this).data("href"); 
      var browserHTML = '<div class="browser draggable">\ 
     <ul class="browser-buttons">\ 
      <li>_ \ 
      <li># \ 
      <li>x \ 
     </ul>\ 
     <div class="browser-win-container">\ 
     <div class="addressbar"></div>\ 
     <iframe class="opening-window" src="'+browseIn+'"></iframe>\ 
    </div>\ 
    </div>'; 
      $("body").append(browserHTML); 
      $(".draggable").draggable(); //look at here 
     }); 
    }); 

Answer 4

मैं अपने समय हो गया है, लेकिन इस समस्या को हाल ही में मुझे भी bugged: तो आप अपने नए तत्व के निर्माण के बाद फिर से खींचने योग्य() विधि कॉल करनी होगी, यह मेरा कोड है। जैसा कि किसी और ने बताया है, आपको नव निर्मित आइटम पर .draggable() दोबारा शुरू करना होगा, लेकिन यदि आप अपने .draggable() में कुछ विकल्प परिभाषित करते हैं तो यह काम नहीं करता है। इसके अलावा काम नहीं किया गया था $().draggable() फ़ंक्शन में और फिर नया तत्व बनाने के बाद फ़ंक्शन को कॉल करना (यह चाल हालांकि ड्रॉपपैबल्स को रीसेट करने के साथ काम करती है - आकृति पर जाएं)।

वैसे भी, लम्बी कहानी छोटी -> एक समारोह में $().draggable() सेटअप लाना और फिर नए तत्व बनाने DID काम करने के बाद समारोह बुला, लेकिन मैं document ready समारोह से बाहर निकालना पड़ा ..... के बाद मैं उसे अक्षम , इसने काम कर दिया।

आप उस फ़ंक्शन को कई बार कॉल कर सकते हैं और यह प्रत्येक बनाए गए तत्व के बाद काम करता रहता है। ऐसा लगता है कि यह document.ready कथन में है तो इसका 1 शॉट सौदा ..

आशा है कि मदद करता है।

Answer 5

आप बुलाना चाहिए खींचने योग्य() फ़ंक्शन हर आप एक घटना कॉल कार्रवाई:

$('body').on('click', '.add-new-table', function() { 
$(".canvas").prepend('<div class="ui-widget-content draggable"><p>Drag me</p></div>'); 
$(function(){ 
    $(".draggable").draggable({ 
    containment: "parent" 
    }); 
}); 
}); 

Answer 6

आप नव निर्मित वस्तु का उदाहरण पर खींचने योग्य आवेदन करना होगा, फिर से लिखा कोड:

<script type="text/javascript"> 
$(document).ready(function(){ 
    var newElement = '<p class="draggable">Newly Created Paragraph</p>'; 
    $('body').append(newElement); 
    newElement.draggable(); **//This is working** 
}); 

अब यह काम करना चाहिए।