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

我有一个正方形，它取决于宽度（使用jquery）。 它在预加载的div上运行良好 但是如何使它在动态加载的元素上工作呢

html:

按可添加div

js:

$（函数（）{
$（“.square”）。每个（函数（）{
var width=$（this.outerWidth（）；
$（this.css（“高度”，宽度+“px”）；
});
$（文档）。在（“单击”，“单击”，函数（）上）{
//每个正方形有不同的宽度
$（“.container”）.append（“”；//不处理此追加的div
});
});

动态加载（到.container中）的元素不工作。 在这种情况下，也没有要附加的事件…

请尝试以下操作：

$(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");
});

$（文档）。在（“单击”，“单击”，函数（）上）{
//每个正方形有不同的宽度
$（“.container”）。追加（“”）；
var width=$（“.container.square:last”）.outerWidth（）；
$（“.container.square:last”）.css（“高度”，宽度+“px”）；
});

如果要在文档就绪时执行此操作，则需要在添加新方块时执行此操作-

创建一个函数

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

$（函数（）{
调整宽度（）；
$（文档）。在（“单击”，“单击”，函数（）上）{
$（“.container”）。追加（“”）；
adjustWidth（）；//添加新正方形后调整宽度
});
});

您需要创建一个函数，例如：

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

});

$（函数（）{
计算_宽度（）；
$（文档）。在（“单击”，“单击”，函数（）上）{
//每个正方形有不同的宽度
$（“.container”）。追加（“”）；
计算_宽度（）；
});
});

没有用于dom操作/小部件初始化的委托处理程序。您需要在将目标元素加载到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)
    });

});

$（函数（）{
功能设置高度（els）{
$（els）.高度（函数（）{
返回$（this.outerWidth（）；
});
}
//页面加载时是否存在任何方块
设置高度（“.平方”）；
$（文档）。在（“单击”上，“.click”，函数（）{
//每个正方形有不同的宽度
var$div=$（“”）.appendTo（“.container”）；
设置高度（$div）
});
});

你不能这么做。。。当新的

square

元素被删除时，您必须再次运行每个循环代码created@Satpal授权活动，但这不是问题所在。OP只需要在触发事件时重新运行一个循环。

$(function(){

  calculate_widths();

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

});

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

});