1

假设我有以下代码：

<div id="outerrt">
  <div id="rt" style="width: 200px; height: 200px; border: 1px solid black;">
    <span id="rt2">content</span>
  </div>
</div>

我使用以下内容：

$("#outerrt *").live("click", function () {
  alert($(this).attr('id'));
});

当我点击文本时，它会给我content三个警报窗口，按以下顺序：

rt2

rt

outerrt

我真正希望它给我的只是一个 id: rt2。我该如何做到这一点？

4

5 回答 5

1

这是你想要的吗？

$("#rt2").live("click", function () {
  alert($(this).attr('id'));
});
于 2012-09-01T09:32:07.727 回答
1 
$('#outerrt').on( 'click', '#rt', function() {
  alert($(this).attr('id'));
});

编辑： $(this) 和 $(e.target) 一样有效

于 2012-09-01T09:32:11.267 回答
1

您可以使用对象target的属性event。

$(document).on("click", '#outerrt', function(event) {
      alert(event.target.id);
      // $(event.target).attr('id')
});
于 2012-09-01T09:34:01.010 回答
1

实际上它只会给你前两个警报，因为#outerrt *选择器与元素不匹配id="outerrt".

要阻止事件冒泡，请使用以下stopPropagation方法：

$("#outerrt *").live("click", function (e) {
  e.stopPropagation();
  alert($(this).attr('id'));
});

在较新版本的 jQuery 中，不推荐使用liveanddelegate方法，它们将所有功能都塞进了on方法中，因此等效代码为：

$("body").on("click", "#outerrt *", function (e) {
  e.stopPropagation();
  alert($(this).attr('id'));
});

但是，您应该将委托尽可能靠近您想要捕获事件的元素，即在您将加载内容的元素上。例子：

$("#outerrt").on("click", "*", function (e) {
  e.stopPropagation();
  alert($(this).attr('id'));
});
于 2012-09-01T09:38:47.747 回答
0

直接在#rt2 上绑定它，或者使用delegateoron代替（取决于你的 jQuery 版本）。

使用delegate，您可以传递更具体的选择器：

$("#outerrt *").delegate("span","click", function () {
  alert($(this).attr('id'));
});

与以下类似on：

$("#outerrt").on("click", "#rt2", function(event){
  alert($(this).attr('id'));
});

在任何一种情况下，更具体的选择器 (span或#rt2) 意味着它仅在点击发生在与该选择器匹配的东西上时才会触发。

于 2012-09-01T09:29:59.350 回答