Dokument klicken funktioniert nicht auf dynamisches Element

Question

Inhalt Skript:

var $ = window.$.noConflict(true); // Required for IE 

function startFunc() { 

    $('a').mouseover(function(e){ 

     var anchor=this; 
     var href=$(anchor).attr('href'); 

     if(href!='#'){ 

      $('.klik-me').remove(); 

      const xPos=e.pageX-20; 
      const yPos=e.pageY-20; 

      let $klikMe=$('<span class="klik-me">Click Me!!</span>').css({ 
       'padding':'5px', 
       'background':'#000', 
       'color':'#FFF', 
       'font-size':'12px', 
       'position':'static', 
       'top':yPos, 
       'left':xPos, 
       'text-align':'center', 
       'z-index':999999 
      }); 

      $(anchor).append($klikMe); 
     } 

    }); 


} 

$('body').on('click','.klik-me',function(){ 

    const href_in=$(this).parent().attr('href'); 

    kango.console.log(href_in); 

    kango.dispatchMessage('storeHref', {href:href_in}); 
}); 


kango.addMessageListener('hrefSuccess', function(event) { 

    kango.console.log(event.data.link); 

}); 

Hintergrund Script:

kango.addMessageListener('storeHref', function(event) { 

event.target.dispatchMessage('hrefSuccess', {link:event.data.href}); 

}); 

Ich füge ein Pop für alle Anker-Tags auf der Seite (dies ist funktioniert gut), ich fügte ein Click-Ereignis in Jquery (ich liebe das) und kango.dispatchMessage zum Senden von Nachrichten an Hintergrund-Skript. Nichts scheint zu funktionieren.

Jede Hilfe wäre willkommen.

PS: Ich arbeite früher mit Crossrider (Awesome) Framework.

Answer 1

Bitte ersetzen:

$('body').on('click','.klik-me',function()

mit:

$('.klik-me').on('click',function() 

Es sollte funktionieren.

Answer 2

Verwenden Sie das Snippet unten ist, was ich überall lese, ich kann es aber nicht funktionieren.

Derzeit versuchen, etwas das gleiche zu tun: jQuery click event after new page loads

Vielleicht kann es von Nutzen sein.

Prost.

$(parent).on('click', child , callback); 

Answer 3

Was ich denke, geschieht, ist die Klick Termin in Ihrem <a> Element sprudeln wird und die Auslösung der Standardnavigation Aktion.

Das Bubbling/Standardverhalten in delegierter Ereignisbehandlung zu stoppen ist schwierig. Was ich stattdessen tun würde, ist das Entfernen der <span> als Kind der <a>. Zum Beispiel

let $klikMe = $('<span class="klik-me">Click Me!!</span>') 
    .css({ ... }) 
    .data('href', href) // set the href data into the <span> 

$(document.body).append($klikMe) // append to body, not anchor 

und in Ihrem Click-Handler

$(document).on('click', '.klick-me', function() { 
    const href_in = $(this).data('href') 

    // then continue as in your original code 

    return false // the click should have no default action 
})