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

Tags: , , ,

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-add').on('click', function(){
            icon_field = $('#'+$(this).data('id'));

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

        $('.faicon-screen .list li').on('click', function(){
            var i = $(this).find('i');
            var i_parts = $(i).attr('class').split(' ');
                .html('<i class="'+i_parts[0]+' '+i_parts[1]+' fa-3x"><i>');

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

function open_modal() {
    icon_field = $('#'+$(this).data('id'));

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!


You can use event delegation for dynamically added elements.

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

Source: stackoverflow