Fatal编程技术网
  • javascript/
  • Javascript 单击按钮添加div，但添加的div响应不同

Javascript 单击按钮添加div，但添加的div响应不同

javascript jquery html css

Javascript 单击按钮添加div，但添加的div响应不同,javascript,jquery,html,css,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"/>

我正在执行一个按钮点击一个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>


$（函数（）{
$（“#框”）。可调整大小({
alsoResize:“主”，
同样大小：“标题栏”，
同样大小：“集装箱”
});
$（'#main'）.draggable（）；
$（“#按钮”）。单击（函数（）{
如果（$（this.html（）=“-”）{
$（this.html（“+”）；
}否则{
$（this.html（“-”）；
}
$（“#框”）.slideToggle（）；
}); 
$（“#NewWidget”）。单击（函数（）{
$（“#容器”）.append（'-Hi user你好，用户们，你好吗？
）；
});
});
-
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);
});



$（“#NewWidget”）。单击（函数（）{
var$newElement=$（'-Hi userHello Users.你好吗？
'）；
$newElement.find（'.main'）.draggable（）；
$newElement.find（'.button'）。单击（/*在此处添加单击处理程序函数*/）；
$newElement.find（'.box'）。可调整大小（/*可调整大小的参数位于此处*/）；
$（“#容器”）.append（$newElement）；
});

ID需要是唯一的，因此如果您创建了很多元素，要么使ID唯一，要么使用类或
数据ID
属性来识别哪个框是哪个框-在codepen中的示例中，我向您展示了如何使用简单的
计数器
变量创建ID，该变量在此范围内可用（记住闭包）

您在代码中所做的只是将一个新结构添加到DOM中，没有事件处理程序/钩子附加到此元素，这就是为什么您需要在将元素添加到DOM时创建新的事件处理程序/钩子，或者在我的示例中，在将元素添加到DOM之前创建新的事件处理程序/钩子

以下是代码笔的链接：


附加提示：尽可能避免创建匿名函数，始终命名或引用它们，意思是：


 $(".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


有关更多信息，请参见更新的代码笔
您使用了很多相同的ID。如果在同一页上有两个id相同的元素，jquery只选择第一个。在这种情况下，您应该使用类选择器。另一个可能的问题是，当您创建新的div时，它没有任何事件侦听器。您必须在新div创建后立即将事件侦听器设置为新div提供我有一个div&我希望在单击按钮时创建该div的副本，该副本执行与原始div相同的功能。我可以为此做些什么？假设我有一个div&我希望在单击按钮时创建相同的新div，该新div执行相同的功能功能与原始div相同。我能做什么？假设我有一个div&我想在按钮上单击它，创建一个新div，它执行与原始div相同的功能。我能做什么？如果我正确理解了你的问题，那么答案就在我附在这个答案上的代码笔上-看一下：）。每次单击“AddNewWidget”，您都在创建一个行为相同的新元素（与上一个相同），因为您是从相同的“定义”（在本例中为Javascript中的函数）创建行为的Yaa感谢它的工作，但是如何处理它的CSS？div的背景颜色，如果我必须在每个div上做不同的工作，那么我能做什么？Ya我们可以用calss name来做。完成了。非常感谢。先生，我想要更多的是，如果我通常调用AddWidget函数，而不是按钮，我想传递x，y，width，特定div的高度&div设置为该确切位置