jQuery获取动态id链接的id

Question

jQuery获取动态id链接的id

3

我是jquery的新手，整天搜寻资料都无法解决一个非常简单的问题 :)

这里是测试代码：

js:

$(document).ready(function(){
    $('#transgenic_div').click(function(){
        var selected_transgenic_id = $(this).attr("id");
        alert(selected_transgenic_id);          
    });

});

html:

<div id="transgenic_div">
<p><a class="transgenic_button" id="56">item number 56</a></p>
<p><a class="transgenic_button" id="57">item number 57</a></p> etc
</div>

这只会弹出警告“tansgenic_div”。我正在尝试将所选id传递给另一个函数，但现在只是测试警告...

- steven

2个回答

1

如果我理解你的问题，你实际上不想匹配主要的<div>，而是内部链接：

$(document).ready(function(){
    $('#transgenic_div p a').click(function(){
        var selected_transgenic_id = $(this).attr("id");
        // Or simply: this.id
        alert(selected_transgenic_id);          
    });
});

顺便提一句，除非你使用HTML 5，否则有效的ID不能以数字开头。

完整工作示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
    $('#transgenic_div p a').click(function(){
        alert(this.id);
    });
});//--></script>
</head>
<body>

<div id="transgenic_div">
<p><a class="transgenic_button" id="56">item number 56</a></p>
<p><a class="transgenic_button" id="57">item number 57</a></p> etc
</div>

</body>
</html>

- Álvaro González

我已经尝试了$('#transgenic_div p a').click(function(){以及我能想到的所有变化，但按钮仍无法工作。 - steven

@steven - 嗯，代码是有效的。我相当确定问题出在其他地方，但只凭“无法工作”这个描述很难诊断问题。 - Álvaro González

动态的代码从jQuery函数中（不起作用）：<p><a class="transgenic_button" id="transgenic_12">Tg(vmat2:GFP)</a></p> 硬编码（有效）：<p><a class="transgenic_button" id="transgenic_56">item number 56</a></p> 这是因为动态代码延迟了吗？完整的代码如下：$(document).ready(function(){ updateTransgenic(); updateRegionTransgenic(); // 这会使用php后端脚本创建动态链接 $('#transgenic_div p').click(function(e) { var selected_transgenic_id = $(e.target).attr("id"); // 或者 e.target.id alert(selected_transgenic_id); }); }); - steven

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- karim79 · Accepted Answer

尝试从点击事件的目标/源元素中获取ID：

请参考目标/源元素来获取点击事件的ID：

$('#transgenic_div').click(function(e){
    var selected_transgenic_id = $(e.target).attr("id"); // or e.target.id
    alert(selected_transgenic_id);          
});

此外，在HTML4中，ID不应以数字开头，建议应用前缀。

如果您只想使用这种技术匹配锚点，可以按以下方式进行：

$('#transgenic_div').click(function(e){
    var t = e.target;
    if(t.tagName.toLowerCase() === "a") {
        var selected_transgenic_id = $(t).attr("id"); // or t.id
        alert(selected_transgenic_id);   
    }       
});