JQuery выбрать элементы в <span>, которые изначально не существуют

Question

Я так долго искал и нашел несколько ответов, которые предлагают использовать .on(), как в $('.idOfMyElemenet').on(), работает даже для элементов, которые еще не существуют. Но это не похоже на поиск элемента. Я что-то не так делаю?

Самый высокий уровень <span> (на скриншоте) не существует, пока я не нажму на выпадающий список. В конечном итоге я пытаюсь вызвать событие, когда пользователь нажимает на любой из <li> (он же выбирает параметр из выпадающего списка).

$(document).ready(function () {
    var test = "#select2-id_customer-results";
    $(test).on("click", function() {
        console.log('hello')
    })
})

РЕДАКТИРОВАТЬ:

Благодаря Дрю Бейкеру - я думаю, что его второе решение - путь к go. Но еще не совсем ...

Из документации select2

Все публичные c события передаются с использованием системы событий jQuery, и они запускаются на <select> элемент, к которому прикреплен Select2.

Поэтому я попытался прослушать его через идентификатор (который, кажется, не существует но, вероятно, будет id_customer) и класс. Класс, который я добавил ниже, работал , а не . Есть ли способ прослушать это, используя Jquery?

$(document).ready(function () {
    // console.log($('#id_customer'));
    $('.modelselect2 form-control select2-hidden-accessible').on('select2:select', function (e) {
        var data = e.params.data;
        console.log(data);
    });    
});

Answer 1

Я отвечу на ваш вопрос, но затем дам вам лучшее решение.

Во-первых, вам нужно убедиться, что то, к чему вы прикрепляете .on(), действительно существует. Я обычно использую содержащий DIV или не работающий body или html.

Во-вторых, вам не хватает параметра, который сообщает jQuery о том, на что вы хотите посмотреть, чтобы нажать на него. В этом случае я предполагаю, что это тег UL с указанным вами идентификатором.

Это должно делать то, что вы хотите:

$(document).ready(function () {
    $('body').on("click", "#select2-id_customer-results", function() {
        console.log('hello')
    })
})

Но лучшим решением было бы используйте API Select2, чтобы он сообщал вам, когда что-то выбрано. Это будет намного более надежно и должно заставить ваш код работать после обновлений до Select2.

Примерно так:

$('select[name="customer"]').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

ПРИМЕЧАНИЕ: #mySelect2, вероятно, не то, что у вас есть , Используйте любой идентификатор, который вы использовали для инициализации Select2 в jQuery.

Подробнее об этом API можно прочитать здесь: https://select2.org/programmatic-control/events

Answer 2

Оказывается, это старая ошибка в django -авто-полная . Код ниже работает. Я понятия не имею, почему, но теперь я могу двигаться дальше.

Примечание: 'name' - это значение элемента select2 select (см. Скриншот внизу)

document.querySelector('select[name="customer"]').onchange=function() {
  console.log("myselect2name changed");
}; 

Answer 3

Если вам нужно вызвать событие при нажатии на <li> элементы, вы должны использовать эти элементы id или class в качестве селектора. Проверьте код ниже:

$(document).ready(function () {
  var test = ".select2-results__option";
  $(test).on("click", function() {
      console.log('hello')
  })
})

Answer 4

, если ваш элемент генерируется динамически, и вы хотите настроить таргетинг на этот указанный c элемент. Вам нужно указать stati c контейнер / родительский элемент, чтобы указать, где он находится.

Попробуйте:

$( '#dynamicallyAddedElement' ).on( 'click', '#wrapper', function () { ... });

//where #wrapper is a static parent element in which you add the dynamic links.

Итак, у вас есть обертка, жестко закодированная в HTML исходный код:

PS. Надеюсь, я чем-то помог.