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

}）;