jQuery предотвращает поведение щелчка div при нажатии на встроенную ссылку href

#javascript #jquery #click #live #preventdefault

#javascript #jquery #нажмите #ЖИВЫЕ КОНЦЕРТЫ #preventdefault

Вопрос:

У меня есть div, содержащий ссылку href. Div имеет событие щелчка jQuery в реальном времени:

 $(".item").live("click", function() { 
    window.location = this.id;  
});
  

В div у меня есть href:

 <div class="item" id="/test.html">
    <a href="javascript:void(0);" class="test" id="123">link</a>
</div>
  

Также с событием щелчка в реальном времени:

 $(".test").live("click", function() { 
    $(".item").unbind('click');
    alert(this.id);
});
  

Чего я пытаюсь добиться, так это того, что щелчок div загружает идентификатор div в качестве местоположения, в то время как щелчок по ссылке внутри div выполняет свое собственное действие, предотвращая поведение щелчка div.

Я знаю, что мог бы удалить ссылку href из div, но я этого не хочу 😉

Ответ №1:

ОБНОВЛЕНО

Если вы можете, используйте jQuery 1.7 для делегирования событий с помощью .on и остановите распространение щелчков привязки:

 $(document).on("click","a.test", function(e) { 
    e.stopImmediatePropagation();
});

$(document).on("click","div.item", function(e) { 
    // whatever
});
  

http://jsfiddle.net/AuHjA/3/

В противном случае используйте .delegate вместо .live :

 $(document).delegate("a.test", "click", function(e) { 
    e.stopPropagation();
});

$(document).delegate("div.item", "click", function(e) { 
    //whatever
});
  

http://jsfiddle.net/mblase75/AuHjA/4/

Комментарии:

1. Мэтт это потому, что у вас все наоборот, вам нужно остановить распространение в ссылке, а не в div jsfiddle.net/azizpunjani/AuHjA/5 . Причина, по которой это работает в этом случае, заключается в том, что и родительский div, и дочерний элемент были связаны с, .live следовательно e.stopPropagation() , действительно работает.