TransWikia.com

"всплытие" событий DOM

Stack Overflow на русском Asked by Maximmka on January 12, 2021

доброго времени суток.

на странице имеется такая структура:

<div id="view">
    <button id="buy1click">
    <button id="toCart">
</div>

view – отвечает за "быстрый просмотр" элемента

buy1click – отвечает за "покупку в 1 клик"

toCart – отвечает за добавление в корзину

на view, buy1click висят модальные окна (от bootstrap+ajax), на toCart только ajax запрос.

проблема в том что при клике на buy1click вызывается 2 модальных окна – контейнера и кнопки.

я пробовал решить проблему через e.stopPropagation() в buy1click и toCart – проблема решилась только с toCart, т.е. мой ajax выполняется, модальное окно от view не вызывается. с buy1click это не работает (работает мой ajax, но модальное окно bootstrap не вызывается никакое)

так же пробовал определять по чему мы кликаем через e.target (проверка в обработчике view, если клик не по нему – код не выполнять) – получаю невыполнение своего обработчика с вызовом модального окна (открываются окна и для view, и для buy1click, но для view окно пустое т.к. мой обработчик не выполнился).

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

вопрос: можно ли решить эту проблему не изменяя кода плагина, если да, то как? и если нет, то как?

песочница: https://jsfiddle.net/hu9j80ym/

bootstrapdomjavascriptjqueryсобытия

One Answer

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

Решение достаточно простое - можно самим вызвать модальное окно (исп. метод .modal() c параметром show: true), а потом уже использовать stopPropagation()

$("body").on("click", "[data-target='#b1']", function () {
    alert("imitate ajax for b1");
})
    
$("body").on("click", "[data-target='#b2']", function (e) {
    alert("imitate ajax for b2");
    $(this.dataset.target).modal({show: true}); 
    e.stopPropagation();
})
#mother{width:400px;height:400px;background:red;}
#daughter{width:200px;height:190px;background:green;margin:0 auto;position:relative;top:100px;}
p{font-size:20px;text-align:center;padding-top:50px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div id="mother" data-toggle="modal" data-target="#b1">
  <div id="daughter" data-toggle="modal" data-target="#b2">
    <p>click me!</p>
  </div>
</div>

<div class="modal fade show" id="b1" tabindex="-1" role="dialog" aria-labelledby="view" aria-modal="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">Быстрый просмотр</div>
      <div class="product modal-body">
         b1!
      </div>
    </div>
  </div>
</div>

<div class="modal fade show" id="b2" tabindex="-1" role="dialog" aria-labelledby="view" aria-modal="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">Быстрый просмотр</div>
      <div class="product modal-body">
         b2!
      </div>
    </div>
  </div>
</div>

Correct answer by InDevX on January 12, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP