OnClickListener funktioniert nicht [Javascript] [Elektron]

Was mache ich falsch? Wenn ich das gleiche Element von Konsole und fügen Sie einen Klick Hörer wählen ... es funktioniert ... aber dieser Code funktioniert nichtOnClickListener funktioniert nicht [Javascript] [Elektron]

const Template = require('./Template') 
const mustache = require('mustache') 
const DOMHelper = require('./DOMHelper') 

class SymbolDefiner extends Template { 
    constructor (key, data) { 
    super(key) 
    this._data = data 
    } 

    render() { 
    super.render(arguments) 
    const parent = this._parent 
    const props = this._props 
    const eventListener = this._listener 

    const addSymbol = DOMHelper.createElement('button.btn.btn-primary', parent) 
    const btnText = document.createTextNode('Add Symbol') 
    addSymbol.appendChild(btnText) 

    console.log(addSymbol) // this log succeeds 
    addSymbol.addEventListener('click', function() { 
     console.log('xx') 
    }) 
    } 
} 

module.exports = SymbolDefiner

Die DOMHelper ist nur ein einfaches Funktionselement in das DOM hinzufügen sehr einfach durch die Verwendung 'div # id.class-1.class-2' Zeichenfolge. Hier ist der Code für DOMHelper ist:

const obj = {} 

obj.createElement = function (selector, parent, props) { 
    const details = selector.split('#') 
    let eleName, eleId, classList 
    if (details.length > 1) { 
     // id is present 
     eleName = details[0] 
     const attribs = details[1].split('.') 
     eleId = attribs.shift() 
     classList = attribs 
    } else { 
     const attribs = details[0].split('.') 
     eleName = attribs.shift() 
     classList = attribs 
    } 

    const element = document.createElement(eleName) 
    element.setAttribute('id', eleId || '') 
    for (var i in classList) { 
     element.classList.add(classList[i]) 
    } 

    if (props) { 
     for (var key in props) { 
      element.setAttribute(key, props[key]) 
     } 
    } 

    if (parent) { 
     parent.appendChild(element) 
    } 

    return element 
} 

module.exports = obj

Quelle

2017-09-12 Navarjun

_I'm nicht 100% sicher zu sehen, aber ich habe noch nie ein ** ** klicken Magic String für den Fall, ich bin mir dessen bewusst * gesehen * onclick ** Sie können [die Liste hier für native Webbrowser-Ereignisse anzeigen] (https://www.w3schools.com/jsref/dom_obj_event.asp), es sei denn, ein Elektron hat einen ** Klick ** hinzugefügt, Sie sollten 'ddSymbol.addEventListener ändern ('click', function() {'nach' ddSymbol.addEventListener ('onclick', function() {'_ edit: nvm hat das Ereignis vergessen als die Zeichenkette magic. – Andrei

Ich habe gerade deinen Code per Webbrowser ausprobiert und Es funktioniert einwandfrei. Gibt es Konsolenfehler? – Andrei

Keine Konsolenfehler! :( – Navarjun

in der index.html-Seite ich die gesamten Code in das Skript eingefügt wird diese Basis weg schnell von einem leeren Elektronenstart CLI von here

immer den einzigen Dinge, die ich geändert habe, war, dass ich den DOMHelper nicht getrennt habe, ich habe ihn einfach inline hinzugefügt und verwende obj.createElement() direkt. Es hat perfekt funktioniert, also ist alles, was Sie geschrieben haben, korrekt. Die einzige mögliche Sache könnte sein, jede Referenz des Imports zu überprüfen ('./ renderer.js'), aber höchstwahrscheinlich nicht, da die Datei selbst für mich leer ist.

so ist Ihr Code alle goldenen hoffentlich, wo dies hilft

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Hello World!</title> 
</head> 

<body> 
    <h1>Hello World!</h1> 
    <!-- All of the Node.js APIs are available in this renderer process. --> 
    We are using Node.js <script>document.write(process.versions.node)</script>, Chromium 
    <script>document.write(process.versions.chrome)</script>, and Electron 
    <script>document.write(process.versions.electron)</script>. 
    <div id="parentNode"></div> 
</body> 

<script> 
    // You can also require other files to run in this process 
    require('./renderer.js') 
    var obj = {}; 
    obj.createElement = function(selector, parent, props) { 
    const details = selector.split('#') 
    let eleName, eleId, classList 
    if (details.length > 1) { 
     // id is present 
     eleName = details[0] 
     const attribs = details[1].split('.') 
     eleId = attribs.shift() 
     classList = attribs 
    } else { 
     const attribs = details[0].split('.') 
     eleName = attribs.shift() 
     classList = attribs 
    } 

    const element = document.createElement(eleName) 
    element.setAttribute('id', eleId || '') 
    for (var i in classList) { 
     element.classList.add(classList[i]) 
    } 

    if (props) { 
     for (var key in props) { 
     element.setAttribute(key, props[key]) 
     } 
    } 

    if (parent) { 
     parent.appendChild(element) 
    } 

    return element 
    } 

    var parent = document.getElementById('parentNode'); 
    const addSymbol = obj.createElement('button.btn.btn-primary', parent) 
    const btnText = document.createTextNode('Add Symbol') 
    addSymbol.appendChild(btnText) 

    console.log(addSymbol) // this log succeeds 
    addSymbol.addEventListener('click', function() { 
    console.log('xx') 
    }) 
</script> 

</html>

Quelle

2017-09-13 02:33:56 Andrei

Andrei ... Danke für alles! Das ist interessant ... Wenn ich '.addEventListener' entfernen und durch '.onclick =' ersetzen, funktioniert es ... Aber nur die Datei, wo ich das DOMElement ... Noch verstehe das Problem nicht, aber es funktioniert ... danke a lo! – Navarjun

np, wenn Sie es jemals herausfinden, fügen Sie eine Antwort, wie es interessant wäre, um schließlich herauszufinden – Andrei

OnClickListener funktioniert nicht [Javascript] [Elektron]

Antwort

Verwandte Themen