Stop Propagation не работает для ссылки внутри интерактивного div

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

Теперь в моем коде ссылка, которую нужно нажать, имеет класс remove-tag, который вводится при запуске script внешнему элементу search-box.

Ссылка на предыдущий вопрос SO:

jquery: keep <a> link clickable в интерактивном div

Я применил аналогичную логику к моему коду здесь:

$('.remove-tag').click(function(event){
    event.stopImmediatePropagation();
    $(this).parent().remove();
});

Я также пробовал event.stopPropagation();, но это не работает, и нажатие на ссылку по-прежнему выполняет функцию внешнего div, которая технически является ниспадающей системой.

Ответ 1

stopImmediatePropagation работает нормально, реальная проблема заключается в том, что обработчик события click не запущен.

Не запускается, потому что вы динамически добавляете свои элементы в DOM.

В этом случае вы должны использовать делегирование событий с jQuery on.

Ref:

Большинство событий браузера пузырятся или распространяются с самого глубокого, самый внутренний элемент (цель события) в документе, где они происходят вплоть до тела и элемента документа. В интернете Explorer 8 и ниже, несколько событий, таких как изменение и отправка, не изначально пузырь, но jQuery исправляет их, чтобы пузырить и создавать последовательное поведение кросс-браузера.

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

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

код:

$('.search-box').on('click','.remove-tag',function (event) {
    event.stopImmediatePropagation();
    $(this).parent().remove();
});

Демо: http://jsfiddle.net/M3HdC/

Ответ 2

Хорошо, здесь мы идем:

$('.search-box').on('click', '.remove-tag', function(event){
    event.stopPropagation();
    $(this).parent().remove();
});

JSFIDDLE: http://jsfiddle.net/snr9D/4/

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

Ответ 3

Вы не привязываете событие click к элементам .remove-tag, когда они созданы.

Просто запустите это в методе, в котором вы добавляете элементы в тело:

$('.remove-tag').click(function(event){
    event.stopImmediatePropagation();
    $(this).parent().remove();
});

JSFiddle

Ответ 4

В случае, если встроенный JavaScript является вашим единственным вариантом, вы можете сделать следующее:

<div onclick="alert('you clicked the div')">
    <a href="mailto:[email protected]" onclick="alert( 'you clicked the link' ); if( event.stopPropagation ){ event.stopPropagation(); } else { event.cancelBubble=true; } return true;">Send email</span>
</div>

Вы не должны видеть сообщение "Вы нажали на div".

"Возврат истины" в конце позволяет браузеру следовать ссылке. Если вы напишете "return false", ссылка не будет следовать.

Может помочь быстро исправить: -)