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中添加一個按鈕時

回答

相關問題