jQuery UI可拖動不工作在新創建的DOM元素

我有一些DOM元素可拖動使用jQuery UI.All工作正常，但是當我創建一些使用jQuery元素，然後他們根本不可拖動。即jQuery UI可拖動不工作在新創建的DOM元素

$('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>

來源

2012-03-21 Vivek

嘗試在$（'p.draggable'）之前和之後放置警報。draggable（）;'然後看哪一個是最先發生的。也不會是'$（'body'）'？ – 2012-03-22 05:00:29

你需要調用可拖動（）新創建的元素插入DOM後。

原因是，第一行代碼只匹配現有元素。新創建的元素不在第一行中選擇。

來源

2012-03-21 06:45:56

感謝您的努力，但我也嘗試過，我將它保存在'$（document）.ready（）'內，並且還嘗試在文檔末尾寫入'''。之前''標記爲好，但它不工作:( – Vivek 2012-03-21 06:55:22

我不認爲你正在做正確的。新創建的段落如何插入HTML/DOM？創建後，.draggable（）需要是元素調用。 – 2012-03-21 16:48:36

我已經編輯我的問題，請看看！ – Vivek 2012-03-22 04:52:05

其實它似乎有可拖動的問題。當你附加一些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();

來源

2012-03-22 05:09:22

感謝UR TYM和努力，但仍沒有運氣嘗試尚未:( – Vivek 2012-03-22 11:55:37

我想'$（'p.draggable '）'選擇所有具有類'draggable'和'draggable（）'的'p'元素，一旦應用於元素不會再次應用，而先前應用的draggable也會被損壞。嘗試'.draggable（）。draggable（） '在任何元素上，然後你就可以看到，但是，如果你在追加之前應用可拖拽然後追加，它會將draggable（）僅應用於那個元素，並且只能使用一次。「 – 2012-03-22 12:25:39

我有這個問題，但看完這個我可以解決這個問題。所以你必須構建新元素後，再次調用可拖動（）方法，這是我的代碼：

$(".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 
     }); 
    });

來源

2012-06-13 16:39:10

我知道它已經有一段時間，但這個問題最近竊聽我也是。正如其他人提到的那樣，您必須在新創建的項目上重新運行.draggable()，但如果您在.draggable()中定義了某些選項，則這不起作用。此外，沒有工作的是把$().draggable()放入一個函數中，然後在創建一個新元素之後調用該函數（然而這個技巧確實可以用於重置可放入的元素 - 參見圖）。

無論如何，長話短說 - >將$().draggable()安裝在一個函數中，然後在創建新元素DID WORK後調用該函數，但我不得不將它從document ready函數中取出，有效。

您可以多次調用該函數，並在每個創建的元素之後繼續工作。看來，如果它在document.ready聲明那麼它的1杆成交..

希望幫助。

來源

2012-11-18 17:54:20 Matt

」但如果你定義了某些在你的選擇r .draggable（）「....你只是寫了我正在尋找的激動人心的東西......如果我想要在draggable中定義某些選項，該怎麼辦......我該怎麼做？請認爲... – 2015-05-19 08:47:27

「請認爲...」？好的....你有沒有想過？創建一個函數，將draggable（）定義放在那裏（帶選項），然後在需要啓用新創建的元素時調用該函數 – Matt 2015-05-21 19:26:05

，你應該調用可拖動（）函數每次調用事件動作：

$('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" 
    }); 
}); 
});

來源

2016-07-20 13:21:17 minimal

您必須申請可拖動新創建的對象的實例，改寫代碼：

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

它現在應該工作。

來源

2017-05-30 06:52:29

jQuery UI可拖動不工作在新創建的DOM元素

回答

相關問題