[英]onclick funtion when I add a button in ajax
I want to use AJAX to get information. 我想使用AJAX来获取信息。 If succeeds, I want to append the data into a table. 如果成功,我想将数据追加到表中。 Also, in each tr
, I add a button, and I want to trigger an event if I click the button. 另外,在每个tr
,我添加一个按钮,如果我单击该按钮,我想触发一个事件。 Thus, I just append a button with an onclick
function into the table. 因此,我只是将带有onclick
函数的按钮添加到表中。 While, the onclick
function does not work. 同时, onclick
功能不起作用。 Does anyone know why? 有人知道为什么吗? and how I can reach my goal? 以及如何实现我的目标?
Here is the code: 这是代码:
$.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>";
}
}
});
EDIT: Actually, the onclick
function is like this: 编辑:实际上, 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>";
Once I click the button, I can do something with the data's username I get via AJAX. 单击按钮后,我可以使用通过AJAX获得的数据用户名进行操作。 However, even if I write simply, it cannot work. 但是,即使我写得很简单,它也行不通。 For example: 例如:
function addUsers(name){
console.log(name);
}
The name cannot be consoled. 该名称无法使用控制台。 There is an undefined error, or other error happened. 存在未定义的错误,或发生了其他错误。
So, the goal for me is to get response from developer(done), append it to a table in html(done), and click a button(which was append formerly) to do more things with the appended information. 因此,对我而言,目标是从developer(完成)获得响应,将其附加到html(done)中的表,然后单击一个按钮(先前添加)以对附加信息进行更多处理。 Here, I want to add the name into a certain list. 在这里,我想将名称添加到特定列表中。
我认为按钮导致回发,因此再次重新加载页面尝试使用此按钮代替按钮
<input type='button' id='addUsers' class='btn btn-primary btn-xs' onclick='addUsers()' value='Add Users to a Group' />
Let me describe another way to do this and avoid duplicated event attributes: 让我描述另一种方法来避免重复的事件属性:
Invent a class. 发明一堂课。 For instance, let's call it simply addUsersButton
. 例如,我们称其为addUsersButton
。
Add this class to your button while dynamically creating it: 动态创建类时,将其添加到您的按钮中:
tdHtml += /* ... other code here */ + "<button class='btn btn-primary btn-xs addUsersButton'>Add Users to a Group</button>";
Note that there is no onclick
attribute. 请注意,没有onclick
属性。
Now, using event delegation
, define the following handler: 现在,使用event delegation
,定义以下处理程序:
$(document).on('click', 'addUsersButton', function() { var username = $(this).parent().find('td:eq(1)').text(); addUsers(username); });
Now, all of your addUsersButtons
will trigger this event whether they are dynamically generated or not. 现在,无论是否动态生成,所有您的addUsersButtons
都将触发此事件。
$(this).parent().find('td:eq(1)').text()
will work because you store data.data[x].caption.from.username
in the second cell of the current row. $(this).parent().find('td:eq(1)').text()
将起作用,因为您将data.data[x].caption.from.username
存储在当前行的第二个单元格中。 However, it is not a best idea to use this approach. 但是,使用此方法不是最好的主意。 You can declare some kind of data-username
attribute and access it using $(selector).data('username')
. 您可以声明某种data-username
属性,并使用$(selector).data('username')
。
You have messed up your quotes: 您搞砸了自己的报价:
"<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>";
Note \\"
wrapping the parameter for addUsers
. 注意\\"
为addUsers
包装参数。
I suggest you use event delegation, and here is the sample: 我建议您使用事件委托,这是示例:
html: 的HTML:
<button id="addContentBtn"> add content to table</button>
<table id="testTbl"></table>
js 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");
})
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.