Question

我有一个div，我想在其中附加一个用JS创建的按钮，JS定义ID，onclick以及文本。一切正常，除了onclick事件触发页面加载而不是单击时。检查时，甚至没有onclick属性。

以下是一个例子：

function createEditButton(num) {
	var btn = document.createElement("button");
	btn.onclick = myFunc();
	btn.type = "button";
	btn.innerText = "Edit";
	btn.id = "editbutton" + num;
	return btn;
}

function myFunc() {
    alert("hi");
    
}

document.getElementById('someDiv').appendChild(createEditButton(5));

<div id="someDiv"> </div>

我甚至尝试使用addEventListener添加事件：btn.addEventListener("click", showEditFields(event), false);并且结果相同。我不明白我做错了什么。感谢。

Answer 1

这是b / c你正在调用函数而不是引用它：

btn.onclick = myFunc(); /* <-- remove parens */

btn.onclick = myFunc;

Answer 2

将btn.onclick注册为单击回调时，您正在执行函数而不是分配它。您应该使用addEventListener方法来注册点击事件而不是onclick，使用addEventListener的好处是它可以轻松注册多个回调，而假设您在第一次分配'onclick'值两次价值将被取代。

要将值传递给函数，您可以使用bind函数。 bind将使用给定的上下文和绑定到它的参数创建新函数。或者你可以简单地创建一个包装函数，它将使用给定的参数执行回调函数。

<强> Bind: MDN Docs

见下面的例子。

function createEditButton(num) {
  var btn = document.createElement("button");
  btn.addEventListener('click', myFunc);

  // Using Bind to pass value
  btn.addEventListener('click', myFuncWithVal.bind(btn, num));


  // Uaing Wrapper function to pass value
  btn.addEventListener('click', function(event) {
    alert('wrapper function');
    myFuncWithVal(num);
  });

  btn.type = "button";
  btn.innerText = "Edit";
  btn.id = "editbutton" + num;
  return btn;
}

function myFunc() {
  alert("hi");
}


function myFuncWithVal(val) {
  alert(val);
}

document.getElementById('someDiv').appendChild(createEditButton(5));

<div id="someDiv"></div>

Answer 3

function createEditButton(num) {
	var btn = document.createElement("button");
	btn.onclick = myFunc;
	btn.type = "button";
	btn.innerText = "Edit";
	btn.id = "editbutton" + num;
	return btn;
}

function myFunc() {
    alert("hi");
    
}

document.getElementById('someDiv').appendChild(createEditButton(5));

<div id="someDiv"> </div>

Onclick事件触发按钮onload

3 个答案: