Jod*_*oda 928 javascript jquery
有没有办法获取触发事件的元素的ID？
我想的是:
<html>
<head>
<script type="text/javascript" src="starterkit/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
var test = caller.id;
alert(test.val());
});
});
</script>
</head>
<body>
<form class="item" id="aaa">
<input class="title"></input>
</form>
<form class="item" id="bbb">
<input class="title"></input>
</form>
</body>
</html>
当然除了var test应该包含id "aaa",如果从第一个表单触发事件,并且"bbb"如果事件是从第二个表单触发的话.
sam*_*son 1253
在jQuery中event.target总是引用触发事件的元素,其中event是传递给函数的参数.http://api.jquery.com/category/events/event-object/
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});
另请注意this,它也可以工作,但它不是jQuery对象,所以如果你想在它上面使用jQuery函数,那么你必须引用它$(this),例如:
$(document).ready(function() {
$("a").click(function(event) {
// this.append wouldn't work
$(this).append(" Clicked");
});
});
小智 162
作为参考,试试吧!有用!
jQuery("classNameofDiv").click(function() {
var contentPanelId = jQuery(this).attr("id");
alert(contentPanelId);
});
小智 91
虽然在其他帖子中提到过,但我想拼出这个:
$(event.target).id 未定义
$(event.target)[0].id 给出id属性.
event.target.id 还给出了id属性.
this.id 给出id属性.
和
$(this).id 未定义.
当然,差异在于jQuery对象和DOM对象."id"是一个DOM属性,因此您必须在DOM元素对象上才能使用它.
(它绊倒了我,所以它可能绊倒了别人)
All*_*lly 81
对于所有事件,不仅限于jQuery,您可以使用
var target = event.target || event.srcElement;
var id = target.id
如果event.target失败,它将落后于event.srcElementIE.澄清上面的代码不需要jQuery,但也适用于jQuery.
Esp*_*spo 59
您可以使用它(this)来引用触发该函数的对象.
'this'当你在一个回调函数(在jQuery的上下文中)时,是一个DOM元素,例如,由click,each,bind等方法调用.
您可以在这里了解更多信息:http://remysharp.com/2007/04/12/jquerys-this-demystified/
小智 26
我动态地从数据库中生成一个表,以JSON接收数据并将其放入表中.每个表行都有一个唯一的ID,这是进一步操作所需的,因此,如果DOM被更改,您需要一个不同的方法:
$("table").delegate("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
Mac*_*ora 17
在事件财产中解雇了事件的元素
event.currentTarget
我们得到DOM节点对象,其中设置了事件处理程序.
最开始冒泡过程的大多数嵌套节点
event.target
事件对象始终是事件处理程序的第一个属性,例如:
document.querySelector("someSelector").addEventListener(function(event){
console.log(event.target);
console.log(event.currentTarget);
});
有关活动委派的更多信息您可以阅读http://maciejsikora.com/standard-events-vs-event-delegation/
Mor*_*ael 11
作为jQuery对象的source元素应该通过获取
var $el = $(event.target);
这将使您获得点击的来源,而不是点击功能也被分配的元素.当click事件在父对象EG.a表行上的click事件上,并且您需要单击的单元格时,这可能很有用
$("tr").click(function(event){
var $td = $(event.target);
});
小智 7
您可以尝试使用:
$('*').live('click', function() {
console.log(this.id);
return false;
});
在委派事件处理程序的情况下,您可能会遇到以下情况:
<ul>
<li data-id="1">
<span>Item 1</span>
</li>
<li data-id="2">
<span>Item 2</span>
</li>
<li data-id="3">
<span>Item 3</span>
</li>
<li data-id="4">
<span>Item 4</span>
</li>
<li data-id="5">
<span>Item 5</span>
</li>
</ul>
和你的JS代码一样:
$(document).ready(function() {
$('ul').on('click li', function(event) {
var $target = $(event.target),
itemId = $target.data('id');
//do something with itemId
});
});
你很可能会发现itemId是undefined,因为LI的内容包含在a中<span>,这意味着它<span>可能是事件目标.您可以通过一个小支票解决这个问题,如下所示:
$(document).ready(function() {
$('ul').on('click li', function(event) {
var $target = $(event.target).is('li') ? $(event.target) : $(event.target).closest('li'),
itemId = $target.data('id');
//do something with itemId
});
});
或者,如果您希望最大化可读性(并且还避免不必要的重复jQuery包装调用):
$(document).ready(function() {
$('ul').on('click li', function(event) {
var $target = $(event.target),
itemId;
$target = $target.is('li') ? $target : $target.closest('li');
itemId = $target.data('id');
//do something with itemId
});
});
使用事件委派时,该.is()方法对于验证您的事件目标(以及其他内容)实际上是您所需要的是非常有用的.使用.closest(selector)搜索了DOM树,并使用.find(selector)(一般加上.first(),如.find(selector).first())向下搜索.使用.first()时不需要使用.closest(),因为它只返回第一个匹配的祖先元素,同时.find()返回所有匹配的后代.
小智 6
使用可以使用.on事件
$("table").on("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
这适用于大多数类型的元素：
$('selector').on('click',function(e){
log(e.currentTarget.id);
});
这z-index比上面的答案中提到的event参数更高：
$("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
});
这样，您将始终获得id（在此示例中li）元素的。当单击父级的子级元素时，也是如此。
$(".classobj").click(function(e){
console.log(e.currentTarget.id);
})