onclick funtion当我在ajax中添加一个按钮时

我想使用AJAX获取信息。如果成功，我想将数据追加到表中。此外，在每个tr中，我添加一个按钮，并且如果单击该按钮，我想触发一个事件。因此，我只需在表格中追加一个带有onclick函数的按钮。而onclick功能不起作用。有谁知道为什么？以及我如何实现我的目标？onclick funtion当我在ajax中添加一个按钮时

下面是代码：

$.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表格中（完成），然后单击一个按钮（以前追加）以使用附加信息做更多事情。在这里，我想将该名称添加到某个列表中。

来源

2015-11-20 user3919259

我看不到'tdHtml'在哪里使用。让我们假设它被使用:)控制台中的错误是什么？ –

我的猜测是你没有使用事件委托动态创建按钮。 – guradio

从'addUsers（）' – guradio

你搞砸了你的报价：

"<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。

来源

2015-11-20 05:16:53 Igor

是的，我认为这是关键问题。你有什么想法，我该如何修改它？ – user3919259

我显示了正确的引用。 – Igor

谢谢！这样可行！ – user3919259

我觉得按钮导致回传，从而再次重新加载页面尝试使用，而不是按钮这个

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

来源

2015-11-20 05:08:47 Ein2012

按钮可以工作，而函数无法获取正确的用户名字符串。也许事关重大？ – user3919259

让我描述另一种方式来做到这一点，避免重复事件属性：

创建一个类。例如，我们简单地称它为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')访问它。

来源

2015-11-20 05:16:35

我建议你使用事件委托，这里是样本：

HTML：

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

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

}）;

来源

2015-11-20 05:25:08 lynnsea

onclick funtion当我在ajax中添加一个按钮时

回答

相关问题