2015-09-25 16 views
7

Ho un javascript dinamico che crea elementi, con un gestore di elementi evento click ... lo script è incluso da un altro dominio.firefox - impossibile ricevere eventi per javascript dinamico

Tuttavia con Firefox in fase di esecuzione fornisce un avviso di sicurezza e non elabora l'evento click (Chrome funziona correttamente).

Una versione semplificata di seguito

<!DOCTYPE html> 
<html> 
<head><meta charset="UTF-8"></head> 
<body> 
<h2 id="headertitle">TEST</h2> 
<br/> 

<script type="text/javascript" src="somewhereelse.com/script.js"> 
</script> 
</body> 
</html> 

Javascript includono:

document.getElementById("headertitle").insertAdjacentHTML('beforeBegin', 
      "<button value='TEST' onclick='clickHandler(this)' >Button</button>"); 

function clickHandler(evt){ 
    alert("clicked"); 
} 

messaggio di avviso:

sicurezza involucro negato l'accesso alla proprietà non definita sulla privilegiato oggetto Javascript . Supporto per esporre oggetti privilegiati al contenuto non attendibile tramite exposedProp. viene gradualmente rimosso - utilizzare invece binding WebIDL o Components.utils.cloneInto. Si noti che solo il primo accesso a una proprietà negata da un determinato oggetto globale verrà segnalato .

risposta

-1

Ho provato il codice qui e ha funzionato bene per me su Firefox 50.1.0. =/

Tuttavia, si consiglia vivamente di utilizzare JQuery per gestire gli eventi attivati ​​da elementi creati dinamicamente. JQuery gestisce il DOM in modo diverso, è cross-browser ed è fatto apposta per questo tipo di situazione. Potrebbe risolvere il tuo problema. = D

cercare di cambiare tuo html per

<!DOCTYPE html> 
<html> 
<head><meta charset="UTF-8"></head> 
<body> 
<h2 id="headertitle">TEST</h2> 
<br/> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script type="text/javascript" src="somewhereelse.com/script.js"> 
</script> 
</body> 
</html> 

e il codice JS per

document.getElementById("headertitle").insertAdjacentHTML('beforeBegin', 
      '<button value="TEST" class="clickable" id="btn1">Button</button>'); 

$('.clickable').on('click', function() { 
    alert($(this).attr('id') + ' was clicked'); 
}); 

Quello dovrebbe farlo funzionare! Cheers! =)

+0

importazione jQuery? giusto per aggiustarlo? Stai scherzando? – jno

+0

Beh, dubito che lo stia usando solo una volta. E, se sta lavorando con elementi html dinamici, allora SÌ, raccomando vivamente di usare JQuery per gestirli. JQuery è fondamentalmente realizzato per il manupulation DOM live e la cross-browsing. Inoltre, è il modo più semplice per farlo partire, può evolvere da solo da lì. Credo che le persone siano intelligenti! =) Inoltre, preferisco aiutarlo a ottenere tutto ciò che ha bisogno di fare, piuttosto che criticare le persone arroganti che stanno cercando di aiutare, senza offrire alcuna soluzione per il problema: sembra troppo giovanile per farlo. = P – Vinas

Problemi correlati