javascript - DOM 未根据 GET 请求 + 数据属性进行更新

Question

问题:更新通过 GET 请求检索的图像的 src 后，DOM 永远不会更新，但它们的新值会显示在控制台中。

疑似原因:我认为使用数据属性存在一些冲突，但使用 attr() 而不是 data() 似乎无法解决。

要更新的 HTML:

<div class="data-block">
    <img data-item="hp-logo" />
    <img data-item="hp-banner" />
</div>

获取请求:

if(promoid != null) {       
    $.get({
        url: '/snippets/data.html',
        cache: false
    }).then(function(data){
        var tempData = $('<output>').append($.parseHTML(data)).find('.data[data-promo-id="' + promoid + '"]');
        myContent = tempData.html();
        dataItems = $('.data-block').html();
        //console.log('Data Items On Page: ', dataItems);
        $(dataItems).each(function (index, value) {
            if( $(this).is('[data-item]')) {
                //console.log('Data Items With Attribute: ', this);
                dataItemLookup = $(this).attr('data-item');
                //console.log('Data Item Lookup Value: ', dataItemLookup);
                $(myContent).each(function (index, value) {
                    //console.log('Retrieved Items Checking Against: ', this);
                    if ( $(this).attr('data-alias') == lastalias ) {
                        //console.log('Retrieved Items Match Alias: ', this);
                        if ($(this).attr('data-item') == dataItemLookup) {
                            //console.log('Retrieved Item Match', this);
                            dataImageDesktop = $(this).attr('data-image-desktop');
                            //console.log('Value to be Passed to Data Item: ', dataImageDesktop);
                        } else {
                            // Do nothing
                        }
                    } else {
                        // Do nothing
                    }
                });
                $(this).attr('src', dataImageDesktop);
                console.log(this);
            }
        });
    }); 
}

data.html:

<div class="data-container">
    <div class="data" data-promo-id="11202016">
        <div data-alias="test.html" data-item="hp-logo" data-image-desktop="http://placehold.it/250x150"></div>
        <div data-alias="test.html" data-item="hp-banner" data-image-desktop="http://placehold.it/350x250"></div>
        <div data-alias="not-test.html" data-item="hp-spot" data-image-desktop="http://placehold.it/450x350"></div>
    </div>
</div>

不确定如何继续解决此问题。除了 DOM 更新之外，一切都按预期进行。有想法吗？

Answer 1

在元素上使用html()将获得该对象的innerHTML，它是一个字符串。因此，稍后在 $() 中使用它会导致 jQuery 创建未附加到 DOM 的新元素。如果您只想选择元素并修改它们，只需使用 $(selector) 并修改它即可。不要使用 html() 并用 $() 包装结果。