我想使用 AJAX 更新記錄，但是當我單擊該edit行的按鈕時，我得到的元素data-id與第一行相同。table<table> <!-- this data inside php foreach loop displayed via ajax --> <tr> <td> <a href="<?= $row->id; ?>" id="edit_btn" data-id="<?= $row->id; ?>">edit</a></td> <td> <a href="<?= $row->id;?>'" id="delete_btn" data-id="<?= $row->id; ?>">delete</a></td> </tr></table>$(function($) { edit();})(jQuery);function edit() { $(document).on('click', '#edit_btn', (e) => { e.preventDefault(); var aid = $('#edit_btn').attr('data-id'); // var aid = $('#edit_btn').data('id'); alert(aid); });}
3 回答
胡說叔叔
TA貢獻1804條經驗 獲得超8個贊
您的代碼中的主要問題是因為您將循環中的所有元素都賦予相同的id，這是無效的。id屬性在 DOM 中必須是唯一的。您應該使用一個類來附加事件處理程序，然后在事件處理程序中使用this關鍵字來獲取對引發事件的元素的引用。后一點意味著您需要刪除箭頭函數并改用匿名函數。
話雖如此，您的代碼中還有其他問題需要解決。首先，document.ready 事件處理程序不是 IIFE。從它的末端移除(jQuery)。此外，用于data()檢索數據屬性，而不是attr(). 最后，不要alert()用于調試，因為它會強制數據類型。改為使用console.log()。
jQuery(function($) {
edit();
});
function edit() {
$(document).on('click', '.edit_btn', (e) => {
e.preventDefault();
var aid = $(e.target).data('id');
console.log(aid);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<!-- inside your loop ... -->
<tr>
<td><a href="#1" class="edit_btn" data-id="1">edit</a></td>
<td><a href="#1" class="delete_btn" data-id="1">delete</a></td>
</tr>
<tr>
<td><a href="#2" class="edit_btn" data-id="2">edit</a></td>
<td><a href="#2" class="delete_btn" data-id="2">delete</a></td>
</tr>
<tr>
<td><a href="#3" class="edit_btn" data-id="3">edit</a></td>
<td><a href="#3" class="delete_btn" data-id="3">delete</a></td>
</tr>
</table>
如果您更喜歡使用箭頭功能，那么this您需要使用e.target：
$(document).on('click', '.edit_btn', (e) => {
e.preventDefault();
var aid = $(e.target).data('id');
console.log(aid);
});
慕桂英546537
TA貢獻1848條經驗 獲得超10個贊
您不能有多個具有相同 ID 的元素。jQuery 將始終使用找到的第一個。
您可以為所有編輯/刪除按鈕設置一個類，并使用它來注冊單擊事件。
您可以
$(this)在回調內部使用來僅操作單擊的元素
<td><a class="edit_btn" data-id="<?= $row->id; ?>">edit</a></td>
<td><a class="delete_btn" data-id="<?= $row->id; ?>">delete</a></td>
$(document).on('click','.edit_btn', function(e) {
e.preventDefault();
var aid = $(this).data('id');
alert(aid);
});
阿波羅的戰車
TA貢獻1862條經驗 獲得超6個贊
您應該使用data 方法檢索數據 ID ：
var aid = $('#edit_btn').data('id');警告
ID 必須是唯一的，特別是因為當您嘗試與這些元素交互時，它會導致JavaScript和 CSS 出現問題。
- 3 回答
- 0 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消