Question

我有一个正方形，取决于宽度（用jquery做）。它在预加载的div上工作正常但是如何让它在动态加载的elemrnt上工作？

HTML：

<button class="click">press to add a div</button>

<div class="square"></div>  <!-- working fine here caz it is preloaded on page load -->
<div class="container">
  <!-- container where div's will be added, and here square not working -->
</div>

JS：

$(function(){

  $(".square").each(function(){
var width = $(this).outerWidth();
$(this).css("height",width+"px");
  });

  $(document).on("click" , ".click" , function(){
    // each square has different width
    $(".container").append("<div class='square'></div>");  // not working on this appended div
  });

});

动态加载（转换为.container）的元素不起作用。在这种情况下也没有事件可以附加......

Answer 1

您在准备文档时正在执行此操作，您需要在添加新方块时执行该操作 -

创建一个功能

function adjustWidth(){
 $(".square").each(function(){
   var width = $(this).outerWidth();
   $(this).css("height",width+"px");
 });
}

然后像这样调用它

$(function(){
  adjustWidth();
  $(document).on("click" , ".click" , function(){
    $(".container").append("<div class='square'></div>");
    adjustWidth(); // adjust width after adding new square
  });
});

Answer 2

您需要创建一个功能，例如：

function calculate_widths()
{
  $(".square").each(function(){
   var width = $(this).outerWidth();
   $(this).css("height",width+"px");
  });
}

然后您可以随时执行此功能，

$(function(){

  calculate_widths();

  $(document).on("click" , ".click" , function(){
    // each square has different width
    $(".container").append("<div class='square'></div>"); 
    calculate_widths();
  });

});

Answer 3

试试这个：

$(document).on("click" , ".click" , function(){
// each square has different width
  $(".container").append("<div class='square'></div>");
  var width =$(".container .square:last").outerWidth();
  $(".container .square:last").css("height",width+"px");
});

Answer 4

没有用于dom操作/窗口小部件初始化的委托处理程序。在将目标elemetns加载到dom

之后，需要调用这些方法

$(function () {
    function setHeight(els) {
        $(els).height(function () {
            return $(this).outerWidth();
        });
    }

    //if any square is there when page loads
    setHeight(".square");

    $(document).on("click", ".click", function () {
        // each square has different width
        var $div = $("<div class='square'></div>").appendTo(".container");
        setHeight($div)
    });

});

如何在没有事件处理程序（动态加载）的情况下将函数附加到div

4 个答案: