Así que ya he pasado 2 días tratando de resolver esto. Tengo un <span class="faicon-add" data-id="id_object_places_proximity_keys-0-place_icon" rel="faicon-add"> y un script de jquery cargado

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

El problema es que $('.faicon-add').on('click', function(){ no se activará ...

Intenté agregar onclick="open_modal();" y colocar directamente esta función debajo de span

<script>
function open_modal() {
    $('body').addClass('faicon-active');
    $('.faicon-screen').addClass('show');
    icon_field = $('#'+$(this).data('id'));
}
</script>

Y funcionó, pero esa no es una solución para mí, porque necesito dar una variable modal que icon_field ...

Además intenté agregar solo la función $('.faicon-add').on('click', function(){ en la consola de Google DevTools. Luego, cuando hago clic en span, aparece modal ... Eso es extraño ...

También intenté cargar un script que también contenía solo la función $('.faicon-add').on('click', function(){, pero dentro de él solo puse alert('hello'). Eso no funcionó ...

No es un problema de CSS, agregué z-index:1000;pointer-events:all; a ese intervalo y todavía no funcionará, incluso en la consola de DevTools si ejecuto $('span.faicon-add')[1].click() no funciona ... ([1] porque hay otra etiqueta de intervalo con clase faicon-add)

Jquery es la última versión.

Se supone que este django-faicon funciona en el administrador de django, no en una interfaz de administrador de wagtail. En django admin, funciona como se esperaba, así que creo que es un problema de intersección de scripts ...

Lo único que aparece en la consola es Unchecked runtime.lastError: The message port closed before a response was received.

Y otra cosa extraña es que todas las demás funciones funcionan, por ejemplo, si agrego manualmente la clase show a .faicon-screen y luego hago clic en .faicon-screen .close, la función se ejecuta como se esperaba. . Entonces, $('.faicon-add').on('click', function(){ no está funcionando en ese script, lo cual no puedo determinar por qué SOLO esa función no se ejecuta. ¿Quizás puedo asegurar de alguna manera que la función esté cargada? ¡Ayuda por favor!

2
Shaffle1 10 ago. 2020 a las 01:49

2 respuestas

La mejor respuesta

Puede usar la delegación de eventos para elementos agregados dinámicamente.

$(document).on('click', '.faicon-add', function(){})
1
hev1 9 ago. 2020 a las 23:23

Su código funciona perfectamente, verifique la versión de 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>
1
Berto99 9 ago. 2020 a las 23:01