我执行的是单击按钮时创建了一个 div,但问题是它的性能与主 div 的性能不同,就像调整大小和可拖动一样。请帮忙?
<html>
<head>
<link rel="stylesheet" href="test.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function () {
$("#box").resizable({
alsoResize:"#main",
alsoResize:"#title_bar",
alsoResize:"#container"
});
$('#main').draggable();
$("#button").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
} else {
$(this).html("-");
}
$("#box").slideToggle();
});
$("#NewWidget").click(function() {
$("#container").append('<div class="main" id="main"><div id="title_bar" ><div id="button">-</div></div><div id="box"><div><h4>Hi user</h4><p>Hello Users. How are YOU?</p> </div></div>');
});
});</script>
</head>
<body>
<input type="button" id="NewWidget" value="Add New Widget"/>
<div id="container">
<div class="main" id="main" >
<div id="title_bar" >
<div id="button">-</div>
</div>
<div id="box">
<div>
最佳答案
ID 需要是唯一的,所以如果你创建了很多元素,要么使 ID 唯一,要么使用类或 data-id
属性来识别哪个框是哪个 - 在 codepen 的示例中我向您展示了如何使用简单的 counter
变量创建 ID,该变量在此范围内可用(记住闭包)。
你在代码中所做的只是附加
一个新结构到DOM,没有事件处理程序/ Hook 附加到这个元素,这就是为什么你需要创建新的事件处理程序/ Hook 将元素添加到 DOM,或者之后,在我的示例中,我将在将元素添加到 DOM 之前添加它。
这是 codepen 的链接: https://codepen.io/anon/pen/GEyPXr
附加提示:尽可能避免创建匿名函数,始终命名或引用它们,意思是:
$(".main").find('.button').on('click',function(){
// this looks weak, plus anonymous function doesn't tell you what it does
});
改用这个:
$(".main").find('.button').on('click',makeButtonWork);
function makeButtonWork(){
//this looks much better, plus you named the function and you know the purspose of it, without looking through code
}
回复评论: 改变给定元素的起始位置可以通过添加:
$('#main-' + counter).css({'top': 100, 'left' : 20})//你的位置在这里
在 makeButtonWork
查看更新的代码笔以获取更多信息
关于javascript - 单击按钮添加一个 div,但添加的 div 响应不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44817074/