在单击按钮时添加 div，但添加的 div 响应不同答案

【问题标题】：Adding a div on clicking a button but the divs which are added are not responding same在单击按钮时添加 div，但添加的 div 响应不同
【发布时间】：2017-06-30 22:11:18
【问题描述】：

我正在执行 On Button Clicked 创建了一个 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 的元素，jquery 只选择第一个。在这种情况下，您应该使用类选择器。另一个可能的问题是，当您创建新 div 时，它没有任何事件侦听器。您必须在创建新 div 后立即为其设置事件侦听器
假设我有一个 div 并且我希望在单击按钮时创建该 div 的副本，它执行与原始 div 相同的功能。我该怎么做？

标签： javascript jquery html css

【解决方案1】：

ID 需要是唯一的，所以如果你创建了很多元素，要么使 ID 唯一，要么使用类或 data-id 属性来识别哪个框是哪个 - 在 codepen 的示例中，我向您展示了如何创建 ID使用简单的counter 变量，在这个范围内可用（记住闭包）。

您在代码中所做的只是appending DOM 的一个新结构，没有附加到该元素的事件处理程序/挂钩，这就是为什么您需要在将元素添加到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
}

回复 cmets：可以通过添加来更改给定元素的起始位置：

$('#main-' + counter).css({'top': 100, 'left' : 20}) //your positions here 在makeButtonWork

查看更新的 codepen 了解更多信息

【讨论】：

假设我有一个 div 并且我希望在单击按钮时创建相同的新 div，它执行与原始 div 相同的功能。我该怎么做？
如果我正确理解了你的问题，那么答案就在我附加到这个答案的 codepen 上——看看:)。每次单击“添加新小部件”时，您都会创建一个行为方式相同的新元素（与上一个相同） - 因为您从相同的“定义”创建了行为（在本例中 - Javascript 中的函数）
是的，感谢它的工作，但是如何处理它的 CSS？div 的背景颜色，如果我必须在每个 div 上以不同的方式工作，那么我该怎么办？
是的，我们可以用 calss name 来完成。它完成了。非常感谢。
先生，我想要更多的一件事是，如果我通常调用 AddWidget 函数而不是按钮，并且想要传递特定 div 的 x、y、width、height 并将 div 设置到该确切位置跨度>

【解决方案2】：

Javascript 事件不能以这种方式工作。当你调用$('#main').draggable();时，浏览器会找到匹配的元素（这里是ID为'main'的元素）并对其执行一些操作（这里启用可拖动功能）。如果您稍后添加另一个元素，它也将匹配，它没有任何意义 - 它只是一个普通的 div，直到您再次调用某个脚本。

另外，请记住，页面上的 ID 必须是唯一的，同一页面上不能有两个 id="main" div。改用类。

$("#NewWidget").click(function() {
    var $newElement = $('<div class="main"><div class="title_bar" ><div class="button">-</div></div><div class="box"><div><h4>Hi user</h4><p>Hello Users. How are YOU?</p> </div></div>');
    $newElement.find('.main').draggable();
    $newElement.find('.button').click(  /* add the click handler function here */ );
    $newElement.find('.box').resizable( /* resizable params goes here */ );
    $("#container").append($newElement);
});

【讨论】：

假设我有一个 div 并且我希望在单击按钮时创建相同的新 div，它执行与原始 div 相同的功能。我该怎么做？