1

Всем доброго времени суток! Есть динамически строящийся список по 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); не работает.. Подскажите пожалуйста, что делать, чтоб заработало?

7
  • скорее всего потому, что $(this). в success указывает уже не на элемент. у него контекст уже сменился на контекст функции. Раньше делали так: до блока, где может смениться контекст писали var $this = $(this);. И уже эту переменную потом применяли Commented 10 июн. 2019 в 12:14
  • Сергей Мишин, спасибо за ответ.. попробовал Ваш вариант - не сработал. Добавил логи консоли, чтоб было понятнее, что происходит(что я вижу) по ходу выполнения 2й функции.
    – doodie
    Commented 10 июн. 2019 в 13:43
  • лучше добавьте html разметку Commented 11 июн. 2019 в 3:55
  • Добавил html-разметку.
    – doodie
    Commented 11 июн. 2019 в 11:39
  • $(document).find(this).next('.submenu').append(output); попробуйте так
    – Денис
    Commented 11 июн. 2019 в 11:42

2 ответа 2

0

this изменяется в зависимости от контекста выполнения функции

В функции success он отличен от того, что в функции, которая обрабатывает событие

Варианты решения

  1. Использовать стрелочную функцию с ES6, заменить success: function(response) { на success: (response) => {

  2. Сохранить this, в начале функции, которая обрабатывает событие, добавить var self = this; и заменить $(this).next('.submenu').append(output); на $(self).next('.submenu').append(output);

  3. Привязать контекст функции, с помощью Function​.prototype​.bind, обвернуть код функции success так - success: (function(response) { ... }).bind(this)

1
  • Станислав, спасибо за ответ. Пробовал 2й вариант вчера, а 3й сейчас - console.log($(this)); перед последней строкой, внутри success, выдаёт необходимый элемент div.link, но подменю всё равно не добавляется в DOM. Ищу ошибку..
    – doodie
    Commented 11 июн. 2019 в 13:49
0

Все ответы оказались верными: в коде была проблема в this внутри success. Всем спасибо. Причиной же того, что не получаю необходимый результат - не раскрывается подменю по клику на пункт меню - оказалось то, что css-стили на динамических элементах(.submenu ...) не отрабатывают так же, как на статических. Элементы же(пункты подменю) по клику в DOM-дерево добавляются, но у ul.submenu display остаётся none.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.