Ich habe ein 'div'-Element in Javascript mit der' innerHTML'-Eigenschaft generiert.

(...).innerHTML = 'sometext'+'<div id=\"a\">word</div>'+obj.something+'othertext';

Auf jeden Fall funktioniert das Ereignis onclick nicht.

document.getElementById('a').onclick = function() {
    //do something
}

Was ist das Problem? Wie löse ich es auf (reines Javascript, keine Bibliotheken)?

2
user5064798 7 Aug. 2015 im 14:29

4 Antworten

Beste Antwort

Sie können das Ereignis, das das übergeordnete Element abhört, an das Sie das Div innerHTML delegieren, in Ihrem durch (...) angegebenen Code delegieren. Dies würde die Ereignisse behandeln, die in (...) ausgelöst wurden, und Sie können Aktionen ausführen, die von event.target.id === 'a' abhängig sind.

(...).onclick = function(event) {
    if (event.target.id === 'a') {
    //Do your stuff
    }
}

Auf diese Weise müssen Sie sich keine Sorgen machen, ob Sie beim Anhängen des Listeners das Div bereits dinamisch erstellt haben oder nicht. Um den Ereignishandler zu registrieren, empfehle ich außerdem die ordnungsgemäße Registrierung des Ereignishandles () https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener )

1
Nillus 7 Aug. 2015 im 11:45

Arbeitsbeispiel:

Javascript-Code

document.getElementById('resultDiv').innerHTML = '<div id=\"a\">Test onclick</div>';

document.getElementById('a').onclick = function() {
    alert("Click Event Fired !")
}

Demo für Sie: https://jsfiddle.net/be3a90gw/4/

0
Sumit 7 Aug. 2015 im 11:52

Bitte rufen Sie diese Funktion auf:

document.getElementById('a').onclick = function() {
    //do something
}

Kurz nach dem

(...).innerHTML = 'sometext'+'<div id=\"a\">word</div>'+obj.something+'othertext';
0
Solutionswithus 7 Aug. 2015 im 11:32

Sie müssen diese ID mit der Funktion verknüpfen, nachdem Sie die innere HTML zur äußeren HTML hinzugefügt haben

function bindingFunction(){
    document.getElementById('a').onclick = function() {
//     Your code
    }
}

Kurz nach dem Hinzufügen der innerHTML

(...).innerHTML = 'sometext'+'<div id=\"a\">word</div>'+obj.something+'othertext';
bindingFunction();

Das wird funktionieren.

1
Harshit Gupta 7 Aug. 2015 im 11:42