Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   insertAfter добавляет НЕ полный HTML - почему? (https://javascript.ru/forum/events/67635-insertafter-dobavlyaet-ne-polnyjj-html-pochemu.html)

wmag 28.02.2017 12:09

insertAfter добавляет НЕ полный HTML - почему?
 
код:
$.ajax({
   url:'ajax_player_name_id_by_name?data='+key,
   success: function(data){
     var html = parse_json(data);
     $(html).insertAfter("#"+id);
     alert(html);
   }
});


вообщем выполняется некий аякс запрос, который на выходе дает HTML структуру:

<div class="bc-menu list-group" style="display: none;">
   <a href="#" class="list-group-item" data-id="IN" data-label="India">India</a>
    <a href="#" class="list-group-item" data-id="ID" data-label="Indonesia">Indonesia</a>
</div>


Но при выполнении функции: $(html).insertAfter("#"+id);
почему то на страницу, вставляется ТОЛЬКО ПУСТОЙ DIV элемент, без вложенных ссылок. :blink:
!!! Если читать alert(html), то там всё как надо.

НИЧЕГО НЕ ПОЙМУ - НУЖЕН СОВЕТ :blink:

СПАСИБО!:yes:

рони 28.02.2017 12:28

wmag,

wmag 28.02.2017 13:46

вообщем, сокращу код, чтобы вас не отвлекать и не путать от сути вопроса:
$(html).insertAfter("#"+id);

Вот это вот не вставляет ПОЛНЫЙ HTML
Почему?

в тоже время алертом (alert(html);)
видим, что переменная html содержит:
<div class="bc-menu list-group" style="display: none;">
   <a href="#" class="list-group-item" data-id="IN" data-label="India">India</a>
    <a href="#" class="list-group-item" data-id="ID" data-label="Indonesia">Indonesia</a>
</div>


НО когда использую
$(html).insertAfter("#"+id);

то вставляется лишь:
<div class="bc-menu list-group" style="display: none;"></div>

ksa 28.02.2017 14:14

Цитата:

Сообщение от wmag
сокращу код

Код нужно не сокращать, а делать полный тестовый пример, который проиллюстрирует проблему. ;)

Dilettante_Pro 28.02.2017 14:39

wmag,
Цитата:

Сообщение от wmag
переменная html содержит:
<div class="bc-menu list-group" style="display: none;">
   <a href="#" class="list-group-item" data-id="IN" data-label="India">India</a>
    <a href="#" class="list-group-item" data-id="ID" data-label="Indonesia">Indonesia</a>
</div>

Прямо в таком виде?
Вот, смотрите (из вашего примера убрал только style="display: none;")
Так не работает
<div id="start"></div> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$('<div class="bc-menu list-group" >
    <a href="#" class="list-group-item" data-id="IN" data-label="India">India</a>
    <a href="#" class="list-group-item" data-id="ID" data-label="Indonesia">Indonesia</a>
</div>').insertAfter("#start");
</script>

Так работает
<div id="start"></div> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$('<div class="bc-menu list-group" ><a href="#" class="list-group-item" data-id="IN" data-label="India">India</a><br><a href="#" class="list-group-item" data-id="ID" data-label="Indonesia">Indonesia</a></div>').insertAfter("#start");
</script>

Так что нужны подробности

wmag 28.02.2017 16:21

Я ковычку одну проморгал...
спасибо за ваше внимание и поддержку!


Часовой пояс GMT +3, время: 12:51.