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

【问题标题】：Javascript .on('click' is not working on spanJavascript .on('click' 在跨度上不起作用
【发布时间】：2020-08-09 22:49:04
【问题描述】：

所以我已经花了 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 变量...

另外我尝试在 Google DevTools 控制台中仅添加 $('.faicon-add').on('click', function(){ 函数。然后当我点击跨度时，模态出现了......这很奇怪......

我还尝试加载仅包含 $('.faicon-add').on('click', function(){ 函数的脚本，但在其中我只放置了 alert('hello')。那没用...

这不是 CSS 问题，我已将 z-index:1000;pointer-events:all; 添加到该跨度中，但它仍然无法工作，即使在 DevTools 控制台中运行 $('span.faicon-add')[1].click() 它也无法正常工作...（[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(){ 不能在那个脚本中工作，我无法确定为什么只有那个函数不能运行！也许我可以以某种方式确保该功能已加载？请帮忙！

【问题讨论】：

试试$(document).on('click', '.faicon-add', function(){})。
@hev1 非常感谢！我不知道为什么会这样...但是再次感谢您！发布答案，以便我将此问题标记为已解决！

标签： javascript jquery django wagtail

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您的代码运行良好，请检查 JQuery 版本

<html>
   <body style="background-color: #f4f7fa;">
      <span class="faicon-add" data-id="id_object_places_proximity_keys-0-place_icon" rel="faicon-add">something</span>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
         <script>
            $( document ).ready(function() {
                  $('.faicon-add').on('click', function(e){
                     e.preventDefault();
                     alert("hello");
                  })
            });
         </script>
   </body>
</html>

【讨论】：

嘿！感谢您的答复。 Jquery 版本是 3.2.1，我无法更改它，因为 wagtail 不允许这样做...我认为这不是问题，因为 django-faicon 模块需要 Jquery 3.0.0