целевой элемент щелкните дочерний элемент, получите родительские атрибуты

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>

Моя проблема в том, что когда я щелкаю промежуток с именем исполнителя, он не возвращает атрибут songid, который я передаю проигрывателю swf для изменения песни, что делает его по умолчанию первой песней в списке воспроизведения, однако когда Я нажимаю на остальную часть тега абзаца, он работает правильно!

Answer 1

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

Поскольку вы привязываетесь к элементам P, вам не нужно проверять, какой элемент this ... это всегда элемент p.Ваш код пытался определить, нажал ли пользователь элемент SPAN или элемент 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 val;), которые ставят val переменная в глобальном пространстве, которая не нужна.

Answer 2

$("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.

Answer 3

Вы можете использовать «ближайший», как показано ниже:

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