Question

出于某种原因，当我拿一块html，删除它，然后将它添加到它来自的同一个地方时，我无法对元素执行操作。知道为什么吗？

这样的事情：

<div id="container">

    <img src="img.png" id="img1" height="auto">
    <img src="img2.png" id="img2" height="auto">

</div>

<script>

    var imgWidth = 0;

    function getImageWidth() {

        imgWidth = $("#img1").width();

    }

    getImageWidth(); // this will run

    // but if I remove say both images, then add them back
    $("#img1, #img2").remove();

    var block = '<img src="img.png" id="img1" height="auto">' + '\n' +
                '<img src="img2.png" id="img2" height="auto">' + '\n';

    $("#container").append(block);

    getImageWidth(); // this will not run, but no errors are thrown either

</script>

Answer 1

注意：只是想强调我在下面的评论，为那些寻求更清晰的人提供了一些问题。

由于问题的固有异步特性，使用这样的动态添加图像可能会非常棘手。在您可以访问其属性之前，需要加载图像。我建议使用jQuery加载事件（或通过vanilla JS附加事件，如果您决定使用非jQuery路由）等待图像加载。

$("#img1").on("load", function () {
  // logic here
});

如果您决定在getImageWidth函数中附加此事件，请在加载后传递包含要在图像宽度上执行的逻辑的回调，或者将getImageWidth转换为Promise并在承诺后执行逻辑解析。

刚刚向你的小提琴添加了一些真实的图片链接，当重新添加删除的DOM时交换它们以便你可以告诉新的宽度被读取和记录，在Chrome中似乎工作得很好：https://jsfiddle.net/ibarsi/umxxbcpm/

这是我的脚本更改，以防链接终止。

var imgWidth = 0;

function getImageWidth() {
  imgWidth = $("#img1").width();
  return imgWidth
}

console.log("FIRST", getImageWidth());

$("#img1, #img2").remove();

var block = '<img src="http://blogmedia.jaludo.com/titter/wp-content/uploads/2012/05/cute-animals4.jpg" id="img1" height="auto">' + '\n' +
    '<img src="https://s-media-cache-ak0.pinimg.com/736x/3a/a8/bd/3aa8bd1b9a1befe4fc77c1556e16a5f8.jpg" id="img2" height="auto">' + '\n';

$("#container").append(block);

console.log("SECOND", getImageWidth());

最初在代码中的dom元素与稍后添加的元素之间有什么区别？

1 个答案: