HTML使用JavaScript使用JQuery属性添加元素
[英]HTML Adding An Element With JQuery Properties Using JavaScript
问题描述
I don't know if the title is very clear but I have an HTML page which has a div on it that is using the JQuery draggable feature. 
我不知道标题是否很清楚，但是我有一个HTML页面，上面有一个使用JQuery可拖动功能的div。
It works as I expect but if I try to add the same element using JavaScript it is not draggable like the one that is added statically. 它可以按我的预期工作，但是如果我尝试使用JavaScript添加相同的元素，则它不会像静态添加的元素一样可拖动。
I have my HTML page 我有我的HTML页面
<!DOCTYPE html>
<html>
<!-- JQUERY LIBRARIES -->
<script src="assets/jquery/jquery-1.12.0.min.js"></script>
<script src="assets/jquery/jquery-ui-1.11.4/jquery-ui.js"></script>
<!-- CUSTOM -->
<script src="scripts/main.js"></script>
<!-- STYLE -->
<style>
.object { background-color:#333333 ; width:100px ; height:60px ; }
</style>
<body>
<!-- DRAG WORKS ON THIS DIV -->
<div class="object ui-widget-content"></div>
<!-- CREATE ANOTHER ONE -->
<button onclick="newObject()">NEW OBJECT</button>
</body>
</html>
Inside my main.js I have 在我的main.js中
$(document).ready(function() {
// APPLY JQUERY DRAGGABLE TO CLASS
$(".object").draggable();
});
function newObject() {
// CREATE A DIV LIKE THE ONE THAT EXISTS
var object = document.createElement("div");
// CREATE CLASS LIKE THE DIV HAS FOR STYLE
var styleClass = "object";
// CREATE SECOND CLASS FOR DRAGGABLE LIKE THE DIV HAS
var dragClass = " ui-widget-content";
// EXECUTE ABOVE
object.className += styleClass;
object.className += dragClass;
document.body.appendChild(object);
}
When the button is clicked it creates a div although the div it creates is not draggable like the one that already exists. 单击该按钮时，它会创建一个div，尽管它创建的div不能像已经存在的那样拖动。
Why is this and is there a way around it? 为什么会这样，并且有办法解决？
2 个解决方案
解决方案1
2 2016-03-09 15:29:23
You must call the draggable() function on your newly created div 您必须在新创建的div上调用draggable（）函数
the $(document).ready() function is called once, when the page is loaded, and so the draggable function is only applied to the existing elements. $（document）.ready（）函数在加载页面时被调用一次，因此可拖动函数仅应用于现有元素。
So when you create a new element, you have to call the draggable function on this one too. 因此，当您创建一个新元素时，也必须在此元素上调用可拖动函数。
To do so you can assign an id to your div and then call the draggable function after the insertion in the DOM : 为此，您可以为div分配一个ID，然后在DOM中插入后调用draggable函数：
object.id = "someRandomId";
$('#someRandomId').draggable();
Or reapply the draggable function to the objects who doesn't have the "ui-draggable" : 或将可拖动函数重新应用于不具有“ ui-draggable”的对象：
document.body.appendChild(object);
$('.object').not('.ui-draggable').draggable();
this solution is better because it works even if you add several divs at once. 此解决方案更好，因为即使您一次添加多个div，它也可以工作。
解决方案2
2 已采纳 2016-03-09 15:29:54
You have to initiate the plugin after the new element is appended to the DOM 在将新元素添加到DOM之后，您必须启动插件
function newObject() {
// CREATE A DIV LIKE THE ONE THAT EXISTS
var object = document.createElement("div");
// CREATE CLASS LIKE THE DIV HAS FOR STYLE
var styleClass = "object";
// CREATE SECOND CLASS FOR DRAGGABLE LIKE THE DIV HAS
var dragClass = " ui-widget-content";
// EXECUTE ABOVE
object.className += styleClass;
object.className += dragClass;
document.body.appendChild(object);
$('.ui-widget-content').draggable();
}
EXPLANATION 说明
On the first initialization (on document.ready) the plugin is applied only to the elements that are present at the DOM at that time. 在第一次初始化时（在document.ready上），插件仅应用于当时DOM中存在的元素。
So, when you append a new element after you have initialized the plugin, you have to initialize the plugin for every newly added element. 因此，在初始化插件后添加新元素时，必须为每个新添加的元素初始化插件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.