stopPropagation не работает в этом экземпляре

Итак, простая вещь, которую я не знаю, как искать, нигде не смог получить ответ...

По сути, я использую XML для заполнения списка. Что происходит, так это то, что при нажатии на первый уровень li он добавляет все различные пригороды к дочернему ul. Это генерирует следующую структуру:

<li class="province-active" style="background-image: url(&quot;img/minus-icon-storefinder.png&quot;);">
  <p>Gauteng</p>
  <ul class="province-sub-menu">
    <li class="province-sub-nav-item" data-suburb="Strijdom Park">Strijdom Park,Randburg</li>
    <li class="province-sub-nav-item" data-suburb="Edenvale">Edenvale,Eastrand</li>
    <li class="province-sub-nav-item" data-suburb="Strubens Valley">Strubens Valley,Roodepoort</li>
    <li class="province-sub-nav-item" data-suburb="Centurion">Centurion,Pretoria</li>
  </ul>
</li>

Хорошо, проблема в том, что с помощью приведенного ниже JQuery он сначала запускает событие click для «province-sub-nav-item», а затем запускает событие click для «province-active» (родительский li). Это JS, который я использую для детей.

$(document).on("click", ".province-sub-nav-item", function(e){
    e.stopPropagation();
    $shop = $(this).attr("data-suburb");
    loadShop($shop);
});

И это функция для родительского li.

$(".province-active").click(function(e) {
    $li = $(this);
    $province = $li.children("p").text();
    $(".store-locations").css("width", 375);    
    getMap($li, $province, 15); 
});

В общем, мне просто нужно не запускать событие щелчка для «активной провинции» без запуска события щелчка для «активной провинции» и stopPropagation(); не работает.

Спасибо ребята.


javascript jquery stoppropagation jquery-click-event
person Hiriji    schedule 04.02.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это потому, что вы использовали делегирование событий и привязали обработчик к объекту документа.

Поэтому, когда событие всплывает, обработчик элементов province-active будет запущен до того, как будет запущен обработчик объектов документа, поэтому ваше распространение остановки не имеет никакого эффекта.

Демонстрация: Fiddle - порядок логирования смотрите в консоли

Одним из возможных решений является использование делегирования событий для элемента province-active.

$(document).on("click", ".province-active", function (e) {
    var $li = $(this);
    var $province = $li.children("p").text();
    $(".store-locations").css("width", 375);    
    getMap($li, $province, 15);
});

Демонстрация: Fiddle - порядок логирования смотрите в консоли

В качестве альтернативы это тоже работает:

$(".province-sub-menu").on("click", ".province-sub-nav-item", function(e){
    e.stopPropagation();
    $shop = $(this).attr("data-suburb");
    loadShop($shop);
});
person Arun P Johny    schedule 04.02.2014
comment
Спасибо, Арун, это имеет смысл. Извините, теперь я понимаю, что это был совершенно глупый вопрос. Трудно найти решения, если вы не знаете, как называются вещи. Я отредактировал ваш ответ решением, которое в итоге сработало для меня - надеюсь, вы не возражаете. Спасибо! - person Hiriji; 04.02.2014