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

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

所以，我的目标是获取开发人员的响应（完成），将其附加到html（已完成）中的表中，然后单击一个按钮（以前附加）以使用附加信息执行更多操作。在这里，我想将名称添加到某个列表中。

Answer 1

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

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

Answer 2

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

发明一个课程。例如，我们简单地称之为addUsersButton。

在动态创建按钮时将此类添加到按钮：

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

请注意，没有onclick属性。

现在，使用 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");
   })

}）;

当我在ajax中添加一个按钮时，onclick功能

4 个答案: