如何在 jquery 和 javascript 中检索 html 标签属性

How to retrieve the html tag attributes in jquery and javascript?

本文关键字：检索 html 标签 属性 javascript jquery      更新时间：2024-05-18

我尝试了以下代码从数组中绘制表并从行中检索属性 id。任何建议将不胜感激。

$(document).ready(function(){
$.get('php/php.php', function(data){
    $.each(data, function(index, value){
    $('table').append(
        "<tr id='someid'>"
            +"<td>"+value.ticker+"</td>"
            +"<td>"+value.bid+"</td>"
        +"</tr>");
    }); 
}, "json");
$('tr').click(function(){
var id = $(this).attr("id");
alert(id);
}) 
});

您将单击事件绑定到尚不存在的元素，因为它们是在异步回调中构造的。不使用click，而是使用 on 。由于表不是动态构造的，因此可以将on处理程序附加到该表。

$('table').on('click', 'tr', function () {
    ...
});

http://api.jquery.com/on/

此外，您正在生成多个具有相同 ID 的<tr>;这不是有效的标记。

由于您正在动态地将新内容注入 DOM，因此它不知道您绑定的点击事件。 因此，您的点击事件将不起作用。

解决方案：使用jQuery on 

$(document).on("click","tr",function(){
  var id = $(this).attr("id");
  alert(id);
})

此方法可从 jQuery 1.7+ 版本获得。如果您使用的是旧版本，则可以考虑使用委托

从jQuery 1.7开始，.live()和.delegate()方法已被弃用on。

一切都很好，但您刚刚错过了 tr 单击事件末尾的分号

$('tr').click(function(){
    var id = $(this).attr("id");
    alert(id);
});

如果 tr id 是唯一的，这将提醒 tr 的 id

确保在任何语法错误中都不允许 jquery 代码执行。

相关文章：