从动态添加的按钮调用函数

Calling an function from a dynamically added button

本文关键字：调用 函数 按钮 动态 添加      更新时间：2023-09-26

我想调用一个函数test(instance)，当我单击一个动态添加的按钮时，它接受一个参数作为测试。但是，它在以以下方式执行操作时会抛出一个错误。我在这里做错了什么？

notificationList.forEach(function(hs) {
        console.log(hs);
        htmlStr = "<tr align='center'>";
            htmlStr += "<td>" + hs.notification + "</td>";
            htmlStr += "<td>" + hs.date + "</td>";
            htmlStr += "<td>" + hs.instance + "</td>";
        htmlStr += "<td  > <input style='align-self: center' type='button' align='center' class='btn btn-primary' value='Info'  onclick='test(hs)'> </input> </td>";
        htmlStr += "</tr>";
        index++;
        $("#hs").append(htmlStr);
    });
function test(instance){
    console.log(instance);
}

您可以在附加按钮后绑定事件

notificationList.forEach(function(hs) {
    console.log(hs);
    htmlStr = "<tr align='center'>";
        htmlStr += "<td>" + hs.notification + "</td>";
        htmlStr += "<td>" + hs.date + "</td>";
        htmlStr += "<td>" + hs.instance + "</td>";
    htmlStr += "<td>";
    htmlStr += "<input style='align-self: center' type='button' align='center' class='dinamicButton btn btn-primary' value='Info'  onclick='test(hs)'> </input> </td>";
    htmlStr += "</tr>";
    index++;
    $("#hs").append(htmlStr);
    $(".dinamicButton").on("click",test)
});
function test(instance){
  console.log(instance);
}

我已经将"dinamicButton"类添加到您的按钮中以使其工作。

您可以在函数上使用jquery。不添加onclick='test(hs)'，您可以在javascript:中添加它

$('btn btn-primary').on('click', function() {
   //your code
})

这将在具有btn btn-primary类的未来元素上触发。

尝试：

$("#hs").append(htmlStr).find('input').click(function() {
  test(hs);
});

您的代码有一些问题：首先，input是一个自闭标签，因此：

<input ...  onclick='test(hs)' />

而不是

<input ...  onclick='test(hs)'> </input>

此外，在HTML的上下文中，hs没有任何意义。。。您可能希望将"hs"作为字符串传递，如下所示：

<input ...  onclick='test("hs")' />

然后用那根绳子做任何你想做的事。。。

您没有在引号内给出值。试着把价值放在引号里，然后试试。

function addButton(){
  var hs = "button Value";
  
  var buttonText = "<button onclick='test('"" + hs + "'");'>click here</button>"
  $("#addHere").html(buttonText);
}
addButton();
function test(value){
console.log(value); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addHere"></div>

你可以试试这个

notificationList.forEach(function(hs) {
console.log(hs);
htmlStr = "<tr align='center'>";
    htmlStr += "<td>" + hs.notification + "</td>";
    htmlStr += "<td>" + hs.date + "</td>";
    htmlStr += "<td>" + hs.instance + "</td>";
    htmlStr += "<td  > <input style='align-self: center' type='button'    align='center' class='dinamicButton btn btn-primary' value='Info'  onclick='test("hs")'> </input> </td>";
    htmlStr += "</tr>";
index++;
$("#hs").append(htmlStr);
var button=document.getElementsByClassName[0];
button.addEventListener("click", test)
});
function test(instance){
console.log(instance);
}

Luigonsec解决方案是行的正确异常

$(".dinamicButton").on("click",test)

你可以添加这样的参数：

$(".dinamicButton").on("click",function(){
       test(hs);
});
相关文章：