Всем доброго времени суток! Есть динамически строящийся список по ajax-запросу при загрузке страницы:
function showItems()
{
$.ajax({
method: 'Post',
url: 'url',
cache: false,
success: function (response) {
let itemsArray = $.parseJSON(response);
let output = '';
for (let i = 0; i < itemsArray.length; i++) {
output += '<div class="link">' + itemsArray[i] +
'</div><ul class="submenu"></ul>';
}
$('#accordion').empty().append(output);
}
});
}
HTML-разметка до загрузки страницы:
<aside class="sidebar">
<ul id="accordion" class="accordion"></ul>
</aside>
И после:
<aside class="sidebar">
<ul id="accordion" class="accordion">
<li>
<div class="link">Item[0]</div>
<ul class="submenu"></ul>
</li>
<li>
<div class="link">Item[1]</div>
<ul class="submenu"></ul>
</li>
<li>
<div class="link">Item[2]</div>
<ul class="submenu"></ul>
</li>
...
</ul>
</aside>
По клику на пункты этого списка опять же ajax-запросом получаю пункты вложенного списка, которые нужно вставить в динамически отстроенный в предыдущей функции элемент ul class="submenu"
function showSubitems()
{
$('#accordion').on('click','.link',function(){
console.log($(this)); // n.fn.init [div.link, context: div.link]
let request = $(this).prop('textContent');
console.log(request); // item - текстовый контент пункта меню, то что нужно
$.ajax({
method: 'Post',
url: 'url',
data: {'data': request},
success: function(response) {
let subitemsArray = $.parseJSON(response);
let output = '';
for (let i = 0; i < subitemsArray.length; i++) {
output += '<li><a href="#">' + subitemsArray[i] + '</a></li>';
}
console.log(output); // <li><a href="#">subitem[0]</a></li><li><a href="#">subitem[1]</a></li>
$(this).next('.submenu').append(output);
}
});
})
}
HTML-разметка, которая должна получиться:
<aside class="sidebar">
<ul id="accordion" class="accordion">
<li>
<div class="link">Item[0]</div> // На этом пункте был клик
<ul class="submenu">
<li><a href="#">subitem[0]</a></li>
<li><a href="#">subitem[1]</a></li>
<li><a href="#">subitem[2]</a></li>
...
</ul>
</li>
<li>
<div class="link">Item[1]</div>
<ul class="submenu"></ul>
</li>
<li>
<div class="link">Item[2]</div>
<ul class="submenu"></ul>
</li>
...
</ul>
</aside>
Так вот последняя до скобок строчка во второй функции $(this).next('.submenu').append(output); не работает.. Подскажите пожалуйста, что делать, чтоб заработало?
$(this).
вsuccess
указывает уже не на элемент. у него контекст уже сменился на контекст функции. Раньше делали так: до блока, где может смениться контекст писалиvar $this = $(this);
. И уже эту переменную потом применяли$(document).find(this).next('.submenu').append(output);
попробуйте так