当我在ajax中添加一个按钮时，onclick函数

onclick funtion when I add a button in ajax

本文关键字：按钮 一个 函数 onclick ajax 添加      更新时间：2023-09-26

我想使用AJAX来获取信息。如果成功，我想将数据附加到一个表中。此外，在每个tr中，我都添加了一个按钮，如果我单击该按钮，我希望触发一个事件。因此，我只是在表中添加一个带有onclick函数的按钮。而onclick功能不起作用。有人知道为什么吗？以及我如何才能达到目标？

这是代码：

 $.ajax({
    url: 'https://api.instagram.com/v1/tags/'+tag+'/media/recent',
    type: "GET",
    dataType: "jsonp",
    cache: false,
    data:{
        access_token: access_token,
        count: count
    },
    success: function(data){
       for(var x in data.data){
         var html="";
         tdHtml +="<tr><td>"+"<a href='"+data.data[x].link+"'><img src='"+data.data[x].images.thumbnail.url+"'></img></a>"+"</td>"+ 
                    "<td class='text-center'>"+data.data[x].caption.from.username+"</td>"+
                    "<td class='text-center'>"+data.data[x].likes.count+"</td>"+
                    "<td>"+create_time+"</td>"+
                    "<td>"+tags+"</td>"+
                    "<td>"+"<button id='addUsers' class='btn btn-primary btn-xs' onclick='addUsers()'>Add Users to a Group</button>"+"</td></tr>";
     }
  }
});

编辑：实际上，onclick函数是这样的：

 "<td>"+"<button id='addUsers' class='btn btn-primary btn-xs' onclick='addUsers('"+data.data[x].caption.from.username+"')'>Add Users to a Group</button>"+"</td></tr>";)'>Add Users to a Group</button>"+"</td></tr>";

一旦我点击按钮，我就可以使用我通过AJAX获得的数据用户名做一些事情。然而，即使我写得很简单，它也不起作用。例如：

function addUsers(name){
  console.log(name);
}

无法安慰该名称。存在未定义的错误，或者发生了其他错误。

因此，我的目标是从开发人员那里获得响应（完成），将其附加到html中的表中（完成）并单击按钮（以前是附加的），用附加的信息做更多的事情。在这里，我想把这个名字添加到一个特定的列表中。

您的报价搞砸了：

"<td>"+"<button id='addUsers' class='btn btn-primary btn-xs' " +
  "onclick='addUsers('""+
  data.data[x].caption.from.username+
  "'")'>Add Users to a Group</button>"+
  "</td></tr>";

注意'"包装了addUsers的参数。

我认为按钮导致回发，因此再次重新加载页面试着用这个代替按钮

<input type='button' id='addUsers' class='btn btn-primary btn-xs' onclick='addUsers()' value='Add Users to a Group' />

让我描述另一种实现这一点并避免重复事件属性的方法：

  1. 创造一个类。例如，让我们简单地称之为addUsersButton。

  2. 在动态创建按钮时，将此类添加到按钮中：

    tdHtml += /* ... other code here */ +
    "<button class='btn btn-primary btn-xs addUsersButton'>Add Users to a Group</button>";

    请注意，没有onclick属性。

  3. 现在，使用event delegation定义以下处理程序：

    $(document).on('click', 'addUsersButton', function() {
    var username = $(this).parent().find('td:eq(1)').text();
    addUsers(username);
});

    现在，您的所有addUsersButtons都将触发此事件，无论它们是否是动态生成的。

    $(this).parent().find('td:eq(1)').text()将起作用，因为您将data.data[x].caption.from.username存储在当前行的第二个单元格中。然而，使用这种方法并不是一个好主意。您可以声明某种data-username属性，并使用$(selector).data('username')对其进行访问。

我建议您使用事件委派，下面是示例：

html:

<button id="addContentBtn"> add content to table</button>
<table id="testTbl"></table>

js

$(document).ready(function() {
   ("#addContentBtn").click(function(){
        var str="<tr><td>1</td><td><button>button</button></td></tr>" +
         "<tr><td>2</td><td><button>button</button></td></tr>" ;
        $(str).appendTo("#testTbl");
   })
   //this is event delegation
   $("#testTbl").on("click","button",function(){
                alert("clicked");
   })

})；

相关文章：