Javascript.on（'；click'；在span上不起作用

所以我已经花了两天的时间来解决这个问题。 我加载了一个

和一个jquery脚本

$( 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();
        })
    });
});

它是有效的，但这对我来说不是一个解决方案，因为我需要给出一个模式，

icon\u字段

变量

另外我尝试只添加

$（'.faicon add'）。在谷歌DevTools控制台中的（'click'，function（）{

函数上。然后当我单击span时，模态显示出来…这很奇怪

我还尝试加载只包含

$（'.faicon add'）的脚本。在（'click'，function（）{

函数中，我只在其中放置了

警报（'hello'）

。这不起作用

这不是CSS问题，我已经将

z-index:1000；指针事件：all；

添加到该范围中，即使在DevTools控制台中运行

$（'span.faicon add'）[1]，它仍然无法工作。单击（）

它无法工作…（

[1]

，因为还有另一个span标记带有class

faicon add

）

Jquery是最新版本

这个

django faicon

应该在django admin中工作，而不是在wagtail admin界面中。在django admin中，它的工作与预期一样，所以我认为这是一个脚本交叉问题

控制台中唯一显示的是

未选中的运行时。lastError：消息端口在收到响应之前关闭。

---

另一个奇怪的是所有其他函数都可以工作，例如，如果我手动将

show

类添加到

.faicon屏幕

，然后单击

.faicon屏幕。关闭

，函数按预期运行。因此

$（'.faicon add'）。打开（'click'，function（））{

无法在该脚本中运行，我无法确定为什么只有该函数无法运行！也许我可以以某种方式确保该函数已加载？请提供帮助！

您的代码运行正常，请检查JQuery版本

某物
$（文档）.ready（函数（）{
$（'.faicon add'）。在（'click'，函数（e）上{
e、 预防默认值（）；
警惕（“你好”）；
})
});

您可以对动态添加的元素使用事件委派

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

---

尝试

$（文档）.on（'click'，'faicon add'，function（）{}）

@hev1非常感谢！我不知道为什么这样做有效…但是，再次感谢！！发布一个答案，我将这个问题标记为已解决！嘿！谢谢你的回复。Jquery版本是3.2.1，我无法更改，因为wagtail不允许这样做…我认为这不是问题，因为

django faicon

模块需要Jquery 3.0.0

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