0

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

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

<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/

4
  • 1
    Добавьте в конец функции $(this.dataset.target).modal({show: true}); e.stopPropagation();
    – InDevX
    8 дек 2020 в 8:19
  • хоспаде, это просто гениально. напишите, пожалуйста, ответ, я его приму. и я был бы благодарен за минимальное разъяснение почему так произошло, такое поведение предусматривает плагин и проблема в том что я просто плохо читал документацию?
    – Maximmka
    8 дек 2020 в 8:28
  • Какок именно поведение? Плагин предусматривает только открытие модалки по клику, а у вас клик сразу по двум эл-там, соответственно, и модалки 2. Особо не вникал в этот плагин, но и не встречал встроенного решения подобной ситуации, так что мы просто сперва сами инициализируем модальное окно по клику, после чего прекращаем передачу события тем же stopPropagation()
    – InDevX
    8 дек 2020 в 8:36
  • понял, спасибо.
    – Maximmka
    8 дек 2020 в 8:41

1 ответ 1

2

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.