Javascript .on(‘click’ is not working on span

So I’ve spend already 2 days trying to solve this. I have a <span class="faicon-add" data-id="id_object_places_proximity_keys-0-place_icon" rel="faicon-add"> and a jquery script loaded

$( document ).ready(function() {
    var icon_field = null;
    $( '<div id="faicon-modal-cont"></div>' ).appendTo( "body" );
    $( "#faicon-modal-cont" ).load( "/faicon/render_icon_list_modal/" ,function() {

        function close_over() {
            $('.faicon-screen').removeClass('show');
            $('body').removeClass('faicon-active');
        }

        $('.faicon-add').on('click', function(){
            $('body').addClass('faicon-active');
            $('.faicon-screen').addClass('show');
            icon_field = $('#'+$(this).data('id'));
        })

        $('.faicon-screen .close').on('click', function(){
            close_over();
        })

        $('.faicon-screen .list li').on('click', function(){
            var i = $(this).find('i');
            var i_parts = $(i).attr('class').split(' ');
            icon_field.val($(i).data('icon'));
            icon_field.siblings('.icon')
                .html('<i class="'+i_parts[0]+' '+i_parts[1]+' fa-3x"><i>');
            icon_field.siblings('[rel="faicon-add"]').hide();
            icon_field.siblings('.faicon-delete').show();
            close_over();
        })
    });
});

The problem is that $('.faicon-add').on('click', function(){ won’t trigger…

I’ve tried to add onclick="open_modal();" and directly placing this function under that span

<script>
function open_modal() {
    $('body').addClass('faicon-active');
    $('.faicon-screen').addClass('show');
    icon_field = $('#'+$(this).data('id'));
}
</script>

And it worked, but that is not a solution for me, because I need to give a modal that icon_field variable…

Also I tried to add only $('.faicon-add').on('click', function(){ function in the Google DevTools console. Then when I click on span, modal is showing up… That’s weird…

I’ve also tried to load script containing also only $('.faicon-add').on('click', function(){ function, but inside it I’ve put only alert('hello'). That didn’t work…

It’s not a CSS issue, I’ve added z-index:1000;pointer-events:all; to that span and it’s still won’t work, even in DevTools console if I run $('span.faicon-add')[1].click() it’s not working… ([1] because there’s another span tag with class faicon-add)

Jquery is the latest version.

This django-faicon is supposed to work in django admin not in a wagtail admin interface. In django admin it works just as expected, so I think it’s it a script intersection issue…

The only thing showing up in the console is Unchecked runtime.lastError: The message port closed before a response was received.

And another weird thing is that all other functions work, for example if I manually add show class to .faicon-screen and then click on .faicon-screen .close, function runs as expected. So $('.faicon-add').on('click', function(){ is not working in that script, which I can’t determine why ONLY that function wont run! Maybe I can somehow insure that function is loaded? Help, please!

Answer

You can use event delegation for dynamically added elements.

$(document).on('click', '.faicon-add', function(){})