I’ll answer your question, but then give you a better solution.

First, you need to make sure the thing you are attaching .on() to actually exists. I typically use a containing DIV or failing that body or html will work.

Secondly you are missing a parameter that tells jQuery the thing you are looking to watch to be clicked on. In this case, I’m assuming it is the UL tag with the ID you provided.

This should do what you want:

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

But a better solution would be to use the Select2 API to have it tell you when something is selected. This will be way more reliable and should make your code work after upgrades to Select2.

Something like this:

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

NOTE: #mySelect2 is probably not what you have. Use whatever ID you used to initialize Select2 in jQuery.

You can read more about that API here: https://select2.org/programmatic-control/events

if your element is dynamically generated and you want to target that specific element. You need to specify a static container/parent element to indicate where it belongs.

Try this:

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

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

So, you have a wrapper which is hard-coded into the HTML source code:

PS. Hope I helped in some way.

If you need to trigger an event when click on <li> elements, you have to use that elements id or class as the selector. Check the below code:

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

It turns out this is an old bug in django-auto-complete.
The code below works. I have no idea why but now I can move on.

Note: the ‘name’ is the value of the select2 select element (see screenshot at bottom)

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

I’ve been looking for so long and found several answers that suggest using .on() as in $('.idOfMyElemenet').on() works even for elements that don’t exist yet. But this doesn’t seem to be finding the element. Am I doing something wrong?

The highest level <span> (in screenshot) does not exist until I click on a drop-down. Ultimately I’m trying to trigger an event when the user clicks on any of the <li> (aka selects an option from the drop-down).

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

EDIT:

Thanks to Drew Baker – I think his second solution is the way to go. But not quite there yet…

From the select2 documentation

All public events are relayed using the jQuery event system, and they
are triggered on the <select> element that Select2 is attached to.

So I tried listening to it via the id (which doesn’t seem to exist but would probably be id_customer) and the class. The class I added below did not work. Is there a way to listen to this using 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);
    });    
});