点击困难时执行javascript函数

Executing javascript functions on click difficulty

本文关键字：执行 javascript 函数      更新时间：2023-09-26

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

此版本的函数有效。它使用参数为"addr2"的onclick-valChange函数创建了一个新按钮。我希望"addr2"是一个字符串，我可以根据需要进行更改，就像我在第二个版本中那样。

html只是该函数用来放入新div的div。这两个版本都将在测试框div中创建一个新按钮。版本1的按钮可以工作，并将在单击时执行alert 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);
}

这里缺少一些引号
当前点击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>

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);
}

在您的第二个版本中，它将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);
    }
相关文章：