jQuery, как выполнить событие только для внутреннего элемента

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

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

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

По сути, это установка знака «Стоп» в 200 футах после перекрестка.

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

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

вы можете увидеть код или отредактировать его по адресу http://jsbin.com/iuxo/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()
  );
});

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

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

$(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 работает?

Пусть обработчик тегов <a> возвращает false.