使用.find（）的jQuery可以'；无法获取动态附加元素的宽度

我有以下代码：

HTML:

<button class="button">Click this!</button>
<div id="divInDom">Div already in DOM.</div>

$(document).ready(function() {
var myStuff = {
    elements: {
        divInDom: $(document).find('#divInDom'),
        divAppended: $(document).find('#divAppended')
    }
}

$(document.body).on('click', '.button', function(event){
    event.preventDefault();

    $('body').append('<div id="divAppended">Div that just got appended.</div>');

    var a = myStuff.elements.divInDom.outerWidth();
    var b = myStuff.elements.divAppended.outerWidth();

    alert('Width of div that was already in DOM: ' + a);
    alert('Width of div that just got appended: ' + b);

});
});

点击这个！
Div已在DOM中。

JS:

<button class="button">Click this!</button>
<div id="divInDom">Div already in DOM.</div>

$(document).ready(function() {
var myStuff = {
    elements: {
        divInDom: $(document).find('#divInDom'),
        divAppended: $(document).find('#divAppended')
    }
}

$(document.body).on('click', '.button', function(event){
    event.preventDefault();

    $('body').append('<div id="divAppended">Div that just got appended.</div>');

    var a = myStuff.elements.divInDom.outerWidth();
    var b = myStuff.elements.divAppended.outerWidth();

    alert('Width of div that was already in DOM: ' + a);
    alert('Width of div that just got appended: ' + b);

});
});

$（文档）.ready（函数（）{
var myStuff={
要素：{
divInDom:$（文档）.find（“#divInDom”），
divadded:$（文档）.find（“#divadded”）
}
}
$（document.body）.on（'click'，'button'，函数（事件）{
event.preventDefault（）；
$（'body'）.append（'Div刚被追加'）；
var a=myStuff.elements.divInDom.outerWidth（）；
var b=myStuff.elements.divadded.outerWidth（）；
警报（'已在DOM中的div的宽度：'+a）；
警报（'刚刚附加的div的宽度：'+b）；
});
});

现场样品：

a

将返回div的宽度，而

b

将不返回div的宽度

在这种情况下，我可能误用了jQuery，但是否可以通过从对象调用属性，使

b

返回附加的

div

的宽度？

此行

$（文档）。find（“#divassended'）

返回一个空数组，因为元素在该点不存在

jQuery已经计算了选择器，但没有找到任何结果，您需要在添加元素后执行该操作

您可以将

dividom

和

divadded

作为函数来实现，以便在每次调用时评估选择器

$(document).ready(function() {
    var myStuff = {
        elements: {
            divInDom: function() {
                return $(document).find('#divInDom');
            },
            divAppended: function() {
                return $(document).find('#divAppended');
            }
        }
    }

    $(document.body).on('click', '.button', function(event){
        event.preventDefault();

        $('body').append('<div id="divAppended">Div that just got appended.</div>');

        var a = myStuff.elements.divInDom().outerWidth();
        var b = myStuff.elements.divAppended().outerWidth();

        alert('Width of div that was already in DOM: ' + a);
        alert('Width of div that just got appended: ' + b);

    });
});

$（文档）.ready（函数（）{
var myStuff={
要素：{
divInDom:function（）{
return$（document）.find（'#divInDom'）；
},
divadded:function（）{
return$（document）.find（'#divadded'）；
}
}
}
$（document.body）.on（'click'，'button'，函数（事件）{
event.preventDefault（）；
$（'body'）.append（'Div刚被追加'）；
var a=myStuff.elements.divInDom（）.outerWidth（）；
var b=myStuff.elements.divadded（）.outerWidth（）；
警报（'已在DOM中的div的宽度：'+a）；
警报（'刚刚附加的div的宽度：'+b）；
});
});

您的

在
$（document.ready（）