我在ajax中添加按钮时的onclick功能

Question

我想使用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);
}

该名称无法使用控制台。 存在未定义的错误，或发生了其他错误。

因此，对我而言，目标是从developer（完成）获得响应，将其附加到html（done）中的表，然后单击一个按钮（先前添加）以对附加信息进行更多处理。 在这里，我想将名称添加到特定列表中。

Answer 1

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

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

Answer 2

让我描述另一种方法来避免重复的事件属性：

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') 。

Answer 3

您搞砸了自己的报价：

"<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包装参数。

Answer 4

我建议您使用事件委托，这是示例：

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

}）;