所以我已经花了两天时间尝试解决这个问题。
我有一个<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;
到这个跨度,它仍然无法工作,即使在 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
类(class) .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/