Question

我正在使用jQuery 附加一个图像，但无法获取它的大小（宽度和高度）。

这是 HTML 代码：

<input type="checkbox" id="RocketElement" data-id="1">

这里是 JS / jQuery 代码：

$(document).ready(function() {

        function printOne(newData) {
            var deferred = $.Deferred();

            $("#Images").append("<img data-id='" + newData.attr("data-id") + "' src='file:///C:/Users/David/Documents/test/" + newData.attr("data-id") + ".png'>");

            deferred.resolve();

            return deferred.promise();
        }

        function getSizes(newData) {
            console.log($("img[data-id='" + newData.attr("data-id") + "']").width());
        }

        $("input#RocketElement").on("change", function() {
            Data = $(this);
            printOne(Data).done(function() {
                getSizes(Data);
            });
        });

    });

但是，当我在 .append 的10ms之后添加延迟时，它会起作用。有什么方法可以等到DOM更新之后再继续执行代码？

Answer 1

不确定要执行的操作，但始终可以传递回调函数。

$(function() {

  function printOne(obj, cb) {
    var newImage = $("<img>", {
      src: "https://i.imgur.com/" + obj.data("id") + ".jpg",
      class: "appended"
    }).data("ref-id", obj.data("id")).appendTo($("#images"));
    cb();
  }

  function getSizes() {
    $("#images img").each(function(i, el) {
      console.log($(el).data("ref-id") + ": " + $(el).css("width"));
    });
  }

  $("input#RocketElement").on("change", function() {
    printOne($(this), getSizes);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="RocketElement" data-id="aMaSED2">
<div id="images"></div>

我已经看到.width()一直都不太好。获得CSS宽度通常更有效。

希望有帮助。

无法获取.appended元素的大小

1 个答案: