Модульное окно открывается только после 2х кликов

Question

Модульное окно открывается только после 2х кликов.

Карточка товара

<div class="quick-view card product-card-alt">
<a class="view" data-id="{{$food->id}}" href="#quick-view" data-toggle="modal">
<img style="border-radius:30px;" src="{{$food->img}}" title="Доставка {{$food->name}}" alt="Доставка {{$food->name}}">
<div class="card-body">
<h3 class="product-title font-size-sm mb-2">{{$food->name}}</h3>
<div class="d-flex flex-wrap justify-content-between align-items-start pb-2">
<p class="font-size-ms text-muted">{{$food->description}}</p>
</div>
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="product-price">
<span class="text-accent">{{$food->properties[0]->price}} ₽</span>
@if($food->properties[0]->old_price)
<del class="font-size-sm text-muted">{{$food->properties[0]->old_price}} ₽</del>
@endif
</div>
</a>
<div class="bg-faded-accent text-accent">
<button class="add-to-cart btn btn-primary btn-sm" type="button" data-toggle="toast" data-target="#cart-toast" data-food-property-id="{{$food->properties[0]->id}}">В корзину<i class="czi-cart font-size-base ml-1"></i></button>
</div>
</div>
</div>
</div>

Модульное окно

<div class="modal fade" id="quick-view" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title product-title">{{$model->name}}</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

<div class="modal-body">
<div class="row">
<!-- Product gallery-->
<div class="col-lg-7 pr-lg-0">
<div class="cz-product-gallery">
<div class="cz-preview order-sm-2">
<img src="{{$model->img}}" alt="Product image">
</div>
</div>
</div>
<!-- Product details-->
<div class="col-lg-5 pt-4 pt-lg-0 cz-image-zoom-pane">
<div class="product-details ml-auto pb-3">
<div class="mb-3"><span class="h3 font-weight-normal text-accent mr-1">{{$model->properties[0]->price}} ₽</span>
@if($model->properties[0]->old_price)
<del class="h3 font-weight-normal text-muted">{{$model->properties[0]->old_price}} ₽</del>
@endif
</div>

<div class="font-size-sm mb-4"><span class="text-muted">{{$model->description}}</span></div>
<h5 class="h6 mb-3 py-2 border-bottom"><i class="czi-announcement text-muted font-size-lg align-middle mt-n1 mr-2"></i>Пищевая ценность на 100 г</h5>
<ul class="font-size-sm pb-2">
<li><span class="text-muted">Энерг. ценность: </span>{{$model->foodInfo->calories}}</li>
<li><span class="text-muted">Белки: </span>{{$model->foodInfo->protein}}</li>
<li><span class="text-muted">Жиры: </span>{{$model->foodInfo->fat}}</li>
<li><span class="text-muted">Углеводы: </span>{{$model->foodInfo->carbohydrates}}</li>
<li><span class="text-muted">Вес: </span>{{$model->foodInfo->weight}}</li>
</ul>

</div>
</div>
</div>
</div>
</div>

</div>
</div>

JS код модульного окна

        $( document ).on( 'click', '.view', function(e) {
            event.preventDefault();
            const id = $(this).attr('data-id');

            $.ajax({
                url: `/api/food/${id}?show=true`,
                success: function (html) {
                    //Wirte Quick view block to DOM
                    $('body').prepend(html)
                    $('#quick-view .slide-img_qv').slick({
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        asNavFor: '.big-img',
                        focusOnSelect: true,
                        appendArrows: $('.slide-img_qv'),
                        adaptiveHeight: false,
                        infinite: false,
                        prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
                        nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
                    });
                    // $('#quick-view-close-btn').on('click', function (event) {
                    //     $('#quick-view').remove()
                    // });
                }
            })

        });

Работает на Bootstraap 4.

Как решить данную проблему? Почему модульное окно открывается только после двойного клика?

Answer 1

У Вас ошибка в названии параметра event, попробуйте сделать так и посмотреть решило ли это данную проблему:

$(document).on("click", ".view", function(event) {
  event.preventDefault()
})

вместо

$(document).on("click", ".view", function(e) { // --- e
  event.preventDefault() // --- event
})

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

БЛОГ НА HUSL

Модульное окно открывается только после 2х кликов

Ответы (1 шт):