jQuery获取动态id链接的id

时间:2011-08-16 11:15:57

标签: jquery dom

我是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传递给另一个函数 - 但现在只是使用警报进行测试...

2 个答案:

答案 0 :(得分:2)

尝试从点击事件的target/source element获取ID:

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

另外,IDs should not start with numbers in HTML4,我建议应用前缀。

如果你想只使用这种技术匹配锚点,你可以这样做:

$('#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);   
    }       
});

答案 1 :(得分: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>