Javascript .on ('click' 在跨度上不起作用

原文 标签 javascript jquery django wagtail

所以我已经花了 2 天时间试图解决这个问题。
我有一个 <span class="faicon-add" data-id="id_object_places_proximity_keys-0-place_icon" rel="faicon-add">并加载了一个 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();
        })
    });
});
问题是 $('.faicon-add').on('click', function(){不会触发...
我尝试添加 onclick="open_modal();"并直接将此函数放在 span
<script>
function open_modal() {
    $('body').addClass('faicon-active');
    $('.faicon-screen').addClass('show');
    icon_field = $('#'+$(this).data('id'));
}
</script>
它奏效了,但这对我来说不是解决方案,因为我需要提供一个模态 icon_field多变的...
还有我试图只添加 $('.faicon-add').on('click', function(){ Google DevTools 控制台中的函数。然后当我点击跨度时,模态出现了......这很奇怪......
我还尝试加载仅包含 $('.faicon-add').on('click', function(){ 的脚本函数,但在里面我只放了alert('hello') .那没用...
这不是 CSS 问题,我添加了 z-index:1000;pointer-events:all;如果我运行 $('span.faicon-add')[1].click(),即使在 DevTools 控制台中,它仍然无法工作。它不起作用...( [1] 因为还有另一个带有类 faicon-add 的 span 标签)
jQuery 是最新版本。
这个django-faicon应该在 django admin 中工作,而不是在 wagtail 管理界面中工作。在 django admin 中它按预期工作,所以我认为这是一个脚本交叉问题......
控制台中唯一显示的是 Unchecked runtime.lastError: The message port closed before a response was received.还有一个 奇怪的问题是所有其他功能都可以工作,例如,如果我手动添加 show上课至.faicon-screen然后点击.faicon-screen .close , 函数按预期运行。所以$('.faicon-add').on('click', function(){在那个脚本中不起作用,我无法确定为什么只有那个函数不会运行!也许我可以以某种方式确保该功能已加载?请帮忙!

最佳答案

您可以将事件委托(delegate)用于动态添加的元素。

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

关于Javascript .on ('click' 在跨度上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63332089/

相关文章:

python - 在 Django Rest Framework 中序列化与中间模型的多对多关系

python - django模型方法中的get_full_path

Django 通用关系建模

javascript - 具有溢出问题的固定/流体 div

javascript - 添加 iframe 时,Knockout.js 数据绑定(bind)不起作用

javascript - 在另一个对象内复制一个对象。 JAVASCRIPT

javascript - jQuery从HTTP请求获取JSON

c# - Ajax更新面板不让javascript在表单服务器端工作?

javascript - 如何在使用 d3.behavior.zoom() 平移时删除 "jumpiness"

javascript - 无法打开数据库,未定义$,无法加载jquery