JQuery, как выполнить событие только на внутреннем элементе - PullRequest
6 голосов
/ 23 февраля 2010

Есть ли способ, позволяющий только внутреннему элементу listitem сделать что-нибудь?

У меня есть элементы списка, которые могут содержать a теги определенного класса.

Внутренние теги a привязаны к обработчику событий живого клика. Сами элементы списка также имеют обработчик события щелчка.

как то так

<li>some text<a class="someClassName">some text</a></li>

с обработчиком для тегов a

$('#somelist li a').live("click", function(e)

и вот как добавляется событие для элемента li

$(markers).each(function(i,marker){
    $("<li />") 
    .html("Locatie "+'<a class="ol id"><strong>'+ids[i]+'</strong></a>') 
    .click(function(e){
          showLocation(marker, i);
    })
    .appendTo("#somelist ");

Ответы [ 3 ]

9 голосов
/ 23 февраля 2010

Метод live в jQuery работает через делегирование событий, которое заключается в захвате всех всплывающих событий от отдельных элементов на общего предка (в вашем случае это document).

Остановка распространения / всплеска события click происходит в элементе обработчика (который является общим предком, а не в самом элементе) и существует намного выше li, которого вы пытаетесь избежать.

Таким образом, к моменту вызова метода stopPropagation мы уже прошли через DOM и передали элемент li.

По сути, это знак остановки 200 футов после пересечения.

Так что вам нужно либо использовать bind и stopPropagation, либо найти другое решение.

Вот пример того, о чем я говорю: http://jsbin.com/ibuxo (проверьте консоль)

Вы можете увидеть код или отредактировать его на http://jsbin.com/ibuxo/edit

Мое предлагаемое решение этой проблемы - использовать bind вместо live.

Это требует от вас дополнительной работы, но это не так уж и плохо.

Вероятно, вы используете live, потому что вы добавляете новые элементы и хотите, чтобы они имели такую ​​же функциональность. Вы должны сделать это, связав их при вводе их на страницу. Вот пример

$(function(){
  var myAnchorHandler = function(e){
    alert('clicked!');
    e.stopPropagation();
    return false;
  };

  // initial bind
  $('#somelist li a').click(myAnchorHandler);

  // code where you input more li elements to the list with links
  $('#somelist').append(
    // bind your function to the element now, and then append it
    $('<li><a>hi</a></li>').find('a').click(myAnchorHandler).parent()
  );
});
0 голосов
/ 20 августа 2013

Решение от автора:

Я добавил все теги a, как указано выше, так что больше не путать с live.

$(markers).each(function(i,marker){
    listitem = $("<li />") 
    .html("Location ") 
    .click(function(e){
        showLocation(marker, i);
    })
    .appendTo("#somelist");
    $("<a />")
    .html("<strong>"+ids[i]+"</strong>")
    .addClass('ol id')
    .click(function(){
        $('#ginfo').show();
        return false;
    })
    .appendTo(listitem);

Вот интересная страница для объяснения всплытия событий: Как остановить всплытие событий с помощью jquery live?

0 голосов
/ 23 февраля 2010

Обработчик тегов <a> возвращает false.

...