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元素

回答

相关问题