Question

我有这段代码：

$('p', 'div.playlist').click(function(e){
  if (e.target != this) {
    val = $(this).parent().attr('songid');
  } else {
    val = $(this).attr('songid');
  }
  alert(val);
})

对应于此：

<div class="playlist">
  <p songid="1">Song Name<span class="small"> by Artist Name</span>
  </p>
</div>

我的问题是当我点击带有艺术家名称的跨度时，它没有返回我传递给swf播放器的songid属性来更改歌曲，这使得它默认为播放列表中的第一首歌曲，但是当我点击段落标记的其余部分，它可以正常工作！

Answer 1

$('p', 'div.playlist').click(function(e){
  var val = $(this).attr('songid');
  alert(val);
})

由于您绑定了P元素，因此您无需检查哪个元素是this ...它始终是p元素。您的代码试图确定用户是否点击了SPAN元素或P元素，而上述代码只是让点击冒泡到P元素并在那里处理。< / p>

以下是演示：http://jsfiddle.net/PAZTs/

如果您想禁止点击SPAN元素，那么您可以在事件处理程序中使用event.stopPropagation()来获取这些元素：

$('span', 'div.playlist').click(function(e){
    e.stopPropagation();
});

以下是演示：http://jsfiddle.net/PAZTs/1/

另外还有一个注意事项：在click事件处理程序中，您声明val var而不使用var关键字var val;）来放置val全局空间中的变量，这是不必要的。

Answer 2

您可以使用“最近”，如下所示：

$('p', 'div.playlist').click(function(){
    alert($(this).closest('p').attr('songid')); 
});

Answer 3

$("div.playlist").on("click", "p", function(){
    var attr = $(this).closest("div.playlist").data("songid");
});

注意我正在使用on()和data()。您不能在HTML中使用自定义属性，除非它们前面有data-。这是在HTML5中添加的。

此代码会将点击处理程序附加到任何p内的任何div元素，其中包含类playlist。处理程序获取父div并获取其data-songid值。

target元素单击子元素，获取父元素

3 个答案: