Question

当元素在另一个元素中时，我遇到了jQuery click事件的问题。我使用的代码类似于以下内容：

<div class="a" id="a">
  <a class="b" id="b"></a>
</div>

$(".a,.b").click(function() {
  var current_id = $(this).attr("id"); 
  alert(current_id);
  ...do something...
});

当我点击标签class =“b”时，它返回封装的class =“a”id，而不是class =“b”的id。我如何对其进行编码，以便当我点击class =“a”或class =“b”时，它会返回正确的相应id值？

Answer 1

你必须阻止它冒泡。

$(".a,.b").click(function() {
  var current_id = $(this).attr("id"); 
  alert(current_id);
  // ...do something...
  return false; // <-- stop propagation
});

演示：http://jsfiddle.net/Q9njP/

编辑：更好的方式

$(".a,.b").click(function(event) {
  var current_id = event.target.id; 
  alert(current_id);
  // ...do something...
  event.stopPropagation();
});

演示：http://jsfiddle.net/xMGgA/1/

Answer 2

您需要使用event target。这是事件发生的元素：

$(".a").click(function(event) {
  var current_id = event.target.id;
  alert(current_id);
  ...do something...
});

请注意，这与$(event.target).attr('id')相同，但更清晰，更快，并且我已移除对.b的引用，因为在.b上触发的所有事件都将在.a上匹配{1}}无论如何。

See jsFiddle example.

Answer 3

您还可以创建此类事件

$(document).on('click','#a>.b',function(){
   var current_id = $(this).attr("id"); 
   alert(current_id);
});

当元素在另一个元素中时，jQuery单击事件

3 个答案: