Question

我有这个法典,可以按部就班地编制一个子。

function makeButton(text, classList, parent, onClick){
    let button = document.createElement( button )
    button.classList = classList
    button.innerHTML = text
    button.onclick = onClick
    parent.appendChild(button)
    return button
}

至今,在象我这样把一个子子添加到已经瞬息万变的OM元件的情形下,它一直被罚款。

let diag = new PopupModal()

makeButton( CANCEL ,  btn btn-sm btn-secondary , diag.footer, function() {
     diag.closeFunc()
})

however I d like to use it in a new way where the button s function is added during the constructor of the class for example

function makeElement(type, classList, parent){
    let el = document.createElement(type)
    el.classList = classList
    parent.appendChild(el)
    return el
}

class complexForm_newProductWithType{
    constructor(doc){
        this.container = document.createElement( div )
        this.container.classList =  container 
        this.doc = doc

        this.identifiers = makeElement( div ,  row , this.container)
        this.descriptors = makeElement( div ,  row , this.container)
        this.options = makeElement( div ,  row , this.container)
        this.buttons = makeElement( div ,  row , this.container)
        ...
        this.button_save = makeButton( SAVE ,  btn btn-sm btn-success , this.buttons, function() {
            console.log( save )
        })
        this.button_cancel = makeButton( CANCEL ,  btn btn-sm btn-secondary , this.buttons, function() {
            console.log( cancel )
        })
    }
}
function addForm(doc){
    form = new complexForm_newProductWithType(doc)
    document.getElementById("doc-selection").innerHTML = form.container.outerHTML
}

in this scenario the button is created with the correct style and text but the event does not fire. I ve tried changing the line onclick = onClick to button.addEventListener( click , onClick, false) with no effect

Answer 1

我测试了你的基本法典,该法典是可操作的,你能否提供独一无二的信息?

  function makeButton(text, classList, parent, onClick) {
            let button = document.createElement( button );
            button.classList = classList;
            button.innerHTML = text;
            button.onclick = onClick;
            parent.appendChild(button);
            return button;
        };


        class FormWithLotsOfButtonsAndInput {
            constructor() {
                this.diag = document.createElement( div )
                document.body.appendChild(this.diag)
                this.button1 = makeButton( save ,  btn , this.diag, function () {
                    console.log( do something )
                });
            }
        }

        const _tools = new FormWithLotsOfButtonsAndInput;


        console.log(_tools)

Answer 2

Thanks to Xiahaolin I realized my issue. Since his writing of my code functioned I looked to see what was different. Which was that he used document.body.appendChild I had used innerHTML to insert my dom elements. changing it to appendChild(form.container) fixed my issue. Thank you for your help!

友情链接