无法获取.append元素的大小

Question

我正在使用 jQuery appending image，但我无法获取它的尺寸（宽度和高度）。

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

    });

但是，当我在 10ms 的 .append 之后添加延迟时，它会起作用。有没有办法等到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 宽度通常更有效。