Question

我有以下代码，在$(document).ready()中调用：

btnHolders.appendChild(_createButton("Note", function(){
    showNote();
}));

var _createButton = function(name, func){
  var btn = document.createElement("input");
  btn.type = "button";
  btn.id = "btn" + name;
  btn.onclick = func;
  btn.value = name;

  return btn;
};

然而，当我查看源代码时，我得到以下内容：

<input type="button" id="btnNote" value="Note">

Answer 1

当你调用之前没有定义的函数时，我重构了你的代码。另外，为什么不使用jQuery缩短你的代码呢？

var btnHolders = $('#btnHolders');

_createButton("Note", showNote);

function _createButton(name, func){
  var btn = $('<input/>').attr({
      'type': 'button',
      'id': 'btn' + name,
      'value': name
  }).bind('click', func);

  btnHolders.append(btn);
};

function showNote() {
    console.log('test');
}

DEMO

Answer 2

如果您需要在javascript中进行操作，请参阅此...

请参阅以下小提琴...... [小提琴1]：http://jsfiddle.net/pfCdd/

function myFunction(){
    var btn=document.createElement("BUTTON");
    var t=document.createTextNode("CLICK ME");
    btn.appendChild(t);
    document.body.appendChild(btn);
    btn.onclick = myfunc;
}
myFunction();
function myfunc(){
    alert("hai");
}

Answer 3

使用按钮实时点击：

$("#btnNote").click(function(){    
   alert('i am here ');
})

动态创建按钮onClick无法正常工作

3 个答案: