javascript - 单击按钮添加一个 div,但添加的 div 响应不同

标签 javascript jquery html css

我执行的是单击按钮时创建了一个 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/

相关文章:

javascript - 为什么 chrome.notifications.onButtonClicked.addListener 函数运行多次?

javascript - 在 Wordpress 中排队外部 JS 和 CSS

javascript - 使用 javascript 从 url 检索特定链接

jquery - 根据类更改 jQuery 的链接

css - 决定响应式布局

javascript - 如果 .ts 文件在文件夹中更深, typescript 无法找到要 bcrypt 的模块

javascript - Angular .js : How to store div HTML content in scope variable

php - jQuery JSON 解码(PHP 到 Javascript)

javascript - 在 div 中显示链接名称并更改背景图片

html - 如何相对于三 Angular 形 div 对齐文本?