Question

我正在执行On按钮单击已创建div但问题是它的表现与主div的表现不同，如resizing＆amp; draggable.Please帮助？

$lot_num = strtoupper('e1,1,2,3,4,5,7,8,9,10,11,12,13,14,15,16,17,18,e18');
$ecount = substr_count($lot_num, 'E');
$totcount = count(explode(",", $lot_num));

echo 'END UNIT: '.$ecount;
Echo "\ntotal count: ".  $totcount;
Echo "\nother count: ". Intval($totcount-$ecount);

Answer 1

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);
});

Answer 2

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

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

回复评论：改变给定元素的起始位置可以通过添加：

来完成

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

中

请参阅更新的codepen以获取更多信息

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

2 个答案: