所以我已经花了两天时间试图解决这个问题。我有一个<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(){函数。然后当我点击span时，modal就会出现。。。这很奇怪。。。
我还尝试加载只包含$('.faicon-add').on('click', function(){函数的脚本，但在其中我只放入了alert('hello')。那没用。。。
这不是CSS问题，我已经将z-index:1000;pointer-events:all;添加到该跨度中，但它仍然不起作用，即使在DevTools控制台中，如果我运行$('span.faicon-add')[1].click()，它也不起作用。。。([1]，因为还有另一个类别为faicon-add的跨度标签(
Jquery是最新版本。
这个django-faicon应该在django管理中工作，而不是在wagtail管理界面中工作。在django管理中，它和预期一样工作，所以我认为这是一个脚本交叉问题。。。
控制台中唯一显示的是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(){})
您的代码运行良好，请检查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>