DOM не обновляется по запросу GET + атрибутам данных

Проблема: после обновления src изображений, полученных с помощью запроса GET, DOM никогда не обновляется, но их новые значения отображаются на консоли.DOM не обновляется по запросу GET + атрибутам данных

Предполагаемая причина: Я думаю, что существует некоторый конфликт с использованием атрибутов данных, но использование attr() вместо data(), похоже, не исправляется.

HTML, чтобы обновить:

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

GET запрос:

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. Идеи?

источник

2016-12-07 DusmaN

Почему вы пытаетесь сделать каждый в строке? здесь // $ ('. data-block'). html(); –

Они могут отображаться в нескольких местах на странице и в разных контекстах, поэтому мне нужно проверить, есть ли у них атрибут элемента данных, а затем условно, если они соответствуют псевдониму или нет. – DusmaN

можете ли вы показать полный источник? –

Используя элемент html() на элементе, вы получите innerHTML объекта, который является строкой. Поскольку использование этого метода позже внутри $() приведет к тому, что jQuery создаст новые элементы, которые не привязаны к DOM. Если все, что вам нужно, - это выбрать элементы и изменить их, просто используйте $ (селектор) и измените его. Не используйте html() и оберните результаты с помощью $().

источник

2016-12-08 00:28:48 Taplar

Точно. в этом-то и дело. –

Вместо $(selector).attr('data-name') попробуйте использовать $(selector).data('name'), как показано в документации jQuery.data().

источник

2016-12-08 00:05:21

DOM не обновляется по запросу GET + атрибутам данных

ответ

Смежные вопросы