Почему закрывается popup при клике по нему?

Question

[Andre548]

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

$('.cart-arrow, main').on('click', function () {
        $('.cart-arrow').removeClass('active');
        $('.block-cart').removeClass('block-cart--active');
    });

Answer 1

[Вадим]

$('.cart-arrow, main') какие по Вашему выбираются элементы в этом селекторе?

Ответ

элементы с классом .cart-arrow
и элементы, представляющие тэг main.

Так как событие клика всплывает, то когда доходит до main срабатывает обработчик.
Поэтому где бы Вы не сделали клик, если этот элемент внутри тэга main - сработает этот обработчик.
Из чего можно сделать вывод, что у Вас popup как раз внутри main и лежит.

Comments

[Andre548]

Из main вынес, теперь закрывается при клике по кнопке увеличить товар или в инпуте если что то начать писать. Простите, я просто в javascript полный 0

[Вадим]

Andre548, Окей, достаю из антикварного шкафа свой хрустальный шар.
Вы мне дальше как предлагаете Вам помочь?
Разметка?
Код?
Ссылка где воспроизводится?

[Andre548]

Вадим,

<div class="block-cart">
        <div class="cart-arrow">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 6L6 18" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M6 6L18 18" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </div>
        <div class="cart-wrap">
            <div class="cart">
                            @if(\Gloudemans\Shoppingcart\Facades\Cart::count() > 0)
                <div class="cart_title">
                    1 товар на 999 ₽
                </div>
                                @foreach(\Gloudemans\Shoppingcart\Facades\Cart::content() as $item)
                    <div class="cart-item">
                        <div class="cart-item_img">
                            <img src="{{'storage/' . $item->model->image}}" alt="">
                        </div>
                        <div class="cart-item_content">
                            <div wire:click.prevent="deleteCart({{$item->rowId}})" class="cart-item_cross">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M18 6L6 18" stroke="#070707" stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                    <path d="M6 6L18 18" stroke="#070707" stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <div class="cart-item_title">
                                {{$item->model->name}}
                            </div>
                            <div class="cart-item_mass">
                                999 г
                            </div>
                            <div class="cart-item_inf">
                                <div class="cart-item_price">
                                    {{$item->model->price}} ₽
                                </div>
                                <div class="cart-item_btns">
                                    <button type="button" wire:click.prevent="decreaseQuantity('{{$item->rowId}}')">
                                        <img src="{{asset('assets/img/icons/minus.svg')}}" alt="">
                                    </button>
                                    <input type="text" value="{{$item->qty}}" readonly>
                                    <button type="button" wire:click.prevent="increaseQuantity('{{$item->rowId}}')">
                                        <img src="{{asset('assets/img/icons/plus.svg')}}" alt="">
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

При клике на кнопки в div class="cart-item_btns" закрывается

[Andre548]

Вадим,

.cart-item_btns {
  width: 92px;
  height: 25px;
  background: #FFF3E5;
  border-radius: 10px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 10px;

[Вадим]

Andre548, в предоставленном коде нет ответа почему оно у Вас закрывается при клике по кнопке увеличить товар или в инпуте если что то начать писать. Нужно проводить debug.
Либо давайте ссылку где можно это потрогать, на прод\тестовый сервер, либо воспроизведите проблему в песочнице codepen.
Ну либо в частном порядке дайте доступы - посмотрим, либо на https://freelance.habr.com/