событие клика на карте, не запущенной на клонированном элементе owl-carousel 2 - PullRequest
Новая
       10

событие клика на карте, не запущенной на клонированном элементе owl-carousel 2

0 голосов
/ 06 ноября 2019

Я использую карусель совы для отображения товаров, поскольку у меня есть товары, перечисленные на карточках с кнопкой «Добавить в корзину», но кнопка «Добавить в корзину» на клонированном элементе не вызывает событие щелчка.

Я знаю, что есть много вопросов по этому поводу, но во всех случаях ответ заключается в том, чтобы сделать параметр цикла ложным, но в моем случае я хочу использовать параметр цикла.
loop: false

Кроме того, щелчок каруселиу меня тоже не работает,
$('.bstsrv-carousel').on('click', '.item', function () { alert("click"); });

Вот моя карусель: 

<div class="carousel-wrap">
    <div class="owl-carousel owl-theme bstsrv-carousel">
        <div class="product card" product-id="i" product-color="#D18B49" *ngFor="let item of packages; let i = index">
            <div class="thumbnail">
                <img src="../../assets/img/carousel/main/carousel1.jpg" />
            </div>
            <h1 class="title">{{ item.name }}</h1>
            <div class="product-description stack-card-desc">
                <ul>
                    <li *ngFor="let desc of item.desc">
                        {{ desc }}
                    </li>
                </ul>
            </div>
            <div class="product-checkout-actions daily-offer-cart">
                <button class="add-to-cart dailyoffer-add" *ngIf="!item.isInCart" name="'addtocart' + i"
                    (click)="AddToCart(item)">
                    Add to Cart
                </button>
                <button class="add-to-cart dailyoffer-add" *ngIf="item.isInCart" name="'removecart' + i"
                    (click)="removeCart(item)">
                    Remove
                </button>
            </div>
        </div>
    </div>
</div>

Вот мой вариант карусели: 

  $(".bstsrv-carousel").owlCarousel({
    items: 3,
    loop:  true,
    stagePadding: 0,
    margin: 0,
    autoplay: true,
    autoplayTimeout: 4000,
    autoplayHoverPause: true,
    nav: true,
    dots: false,
    responsiveClass: true,
    responsive: {
      0: {
        items: 3,
        nav: true
      }
    }
  });

1 Ответ

0 голосов
/ 06 ноября 2019

Похоже, вы используете jQuery для настройки совы-карусели. Вам следует использовать библиотеку, созданную специально для Angular: https://github.com/vitalii-andriiovskyi/ngx-owl-carousel-o

Angular имеет очень специфический способ инициализации кода шаблона, который не будет запущен, если вы используете компонент jQuery. Таким образом, в основном, когда компонент jQuery клонирует один из своих элементов карусели, код Angular не будет работать. Переход на библиотеку угловых каруселей jQuery должен быть подходящим способом.

...