javascript - 无法向 JavaScript 中动态创建的按钮添加操作

Question

我在 JavaScript 中动态创建了一个按钮，但我无法为该按钮设置操作..

var but = document.createElement("input");
but.type = "button"
but.value = "NewButton";
but.onClick = check();
var newElement = document.getElementById("addButton"); //span element id
newElement.appendChild(but);

单击按钮时不调用函数'check()'

Answer 1

您的代码有 2 个问题。第一个是事件没有大写，第二个是你想将事件分配给函数而不是函数的结果。它应该看起来像：

but.onclick = check;

这实际上会将事件分配给函数的地址，而不是函数的预期结果（什么都不做）。

Answer 2

check()执行该函数，并将该函数返回的任何内容分配给 but.onClick。要将函数分配给事件，请按名称指定它（不带括号）。

Answer 3

我认为你check的函数不会返回需要分配为 onclick 事件回调的函数，然后

but.onclick = check; 

例如，如果：

var check = function() {   
     return function(){
        /* some logic eg. dependent of arguments 'parent' function' */  
    }  }
//works
but.onclick = check('somethingImportant');

好的，但是如果您想为这些事件分配多个回调，则会出现问题:) 如果您知道addEventListener/会更好attachEvent

but.addEventListener( 'click', check,true );
but.addEventListener( 'click', check2,true );

之后如果需要使用removeEventLister或detachEvent分离功能；

但是 - 尝试使用 jquery :)

var check = function(){/* do something */};
        $('#addButton').append(
           $('<input type="button" value="New Button"/>') 
        ).click( check );​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

或者

    $('#addButton').append( 
           $('<input/>' ).attr( 'type', 'button' ).val( 'New Button' ) )
                .click( function(){ /* do something */ } ) ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
    );

然后

$('#addButton').unbind(  'click' ) // unbind( 'click',check )  

还有更多的可能性：）

Answer 4

小案例onclick：

but.onclick = check();