Question

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

此版本的功能有效。它使用带参数＆＃34; addr2＆＃34;的onclick valChange函数创建一个新按钮。我想要＆＃34; addr2＆＃34;作为一个字符串，我可以根据需要进行更改，就像我在第二个版本中拥有它一样。

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而不是String（这是你想要的）

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>

Answer 2

var i未正确使用。

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

Answer 3

在你的第二个版本中，它将我视为一个字符串。这应该有效：

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

在点击难度上执行javascript函数

3 个答案: