javascript - 在点击困难时执行 javascript 函数

Question

我正在尝试使用一个 javascript 函数来创建单独的按钮，然后我可以单击该函数来执行不同的 js 函数。我为 js 函数创建的每个按钮都有不同的参数。

此版本的功能有效。它使用带有参数“addr2”的 onclick valChange 函数创建一个新按钮。我希望“addr2”是一个我可以根据需要更改的字符串，就像我在第二个版本中的方式一样。

html 只是该函数用于将新 div 放入其中的 div。 两个版本都会在 testbox div 内创建一个新按钮。版本 1 的按钮可以工作，并且将在单击时执行警报 valchange 功能。版本2的按钮不执行该功能。如何让版本 2 正常工作？为什么它目前不工作？

<div id="testbox">

</div>

版本 1，有效

function dostuff()
{
    var newDiv = document.createElement('div');
    var html = '<input type="button"onclick="valChange(`box1`)">;
    newDiv.innerHTML = html;
    $('#testbox').append(html);
}

版本 2，不起作用

function dostuff()
{
    var newDiv = document.createElement('div');
    var i = "box1";
    var html = '<input type="button" onclick="valChange(i)">';
    newDiv.innerHTML = html;
    $('#testbox').append(html);
}

如果按钮确实有效，则显示警报。

function valChange (divID)
{
    alert("it worked" + divID);
} 

Answer 1

你漏掉了一些引号!
目前，点击 JS 需要一个变量 box1 而不是字符串(这就是您想要的)

function dostuff() {
  var newDiv = document.createElement('div');
  var i = "box1";
  var html = '<input type="button" onclick="valChange(\''+ i +'\')">';
  newDiv.innerHTML = html;
  $('#testbox').append(html);
}

function valChange (divID) {
  alert("it worked" + divID);
} 

dostuff();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testbox"></div>

在 jQuery 中执行此操作的另一种方法是:

function dostuff() {
  
  $inp = $("<input/>", {
    type : "button",
    value : "CLICK ME",
    click : valChange
  });
  
  $("<div/>", {
    append : $inp,
    appendTo : "#testbox"
  });

}

function valChange() {
  alert("My value is: " + this.value);
} 

dostuff();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testbox"></div>