Проблема с сокрытием div с помощью «event.stopPropagation»

Работа над корзиной Ajax для Shopify с помощью Cart.JS.

Мой исходный код для скрытия отображения контейнера ajaxcart, где изначально:

<script>
  $(document).ready(function(){
    $("lightbox").hide();
    $("ajaxcart").hide();
    $('#button').click(function(event){
        $('lightbox').show().addClass('fadeIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('fadeIn');
        });
        $('ajaxcart').show().addClass('slideInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('slideInRight');
        });
            event.stopPropagation();
    });
    $("#button").on("click", function (event) {
        event.stopPropagation();
    });
    $('html').click(function() {
      $('lightbox').show().addClass('fadeOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('fadeOut');
            $(this).hide();
        });
        $('ajaxcart').show().addClass('slideOutRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('slideOutRight');
          $(this).hide();
        });
    });

    $('ajaxcart').click(function(event){
        event.stopPropagation();
    }); 
});
</script>

Однако при использовании скрытых частей с event.stopPropagation(); код для использования кнопок корзины искажается из-за остановки событий.

Я создал живое тестирование, чтобы вы могли видеть, как кнопки в корзине не реагируют: https://eldecosmetics.com/pages/bergen

Любые идеи, как безопасно скрыть контейнер «ajaxcart», не останавливая события в контейнере и Ajax, и не используя последнюю часть с event.stopPropagation();, которая кажется проблемой?


javascript jquery ajax shopify
person vemund    schedule 16.07.2017    source источник
comment
Предполагая, что «ajaxcart» является настраиваемым элементом, вы можете скрыть этот элемент, используя метод скрытия jQuery. событие.stopPropagation(); не скрывает элемент. $('ajaxcart').click(function(event) { $(this).hide(); });   -  person Rajesh P    schedule 17.07.2017
comment
@RajeshP Я знаю это, но это не дает мне возможности закрыть «ajaxcart» только при нажатии вне «ajaxcart». Если я удаляю event.stopPropagation(), 'ajaxcart' также закрывается при нажатии на контейнер.   -  person vemund    schedule 17.07.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вместо того, чтобы использовать $('html').click(function(), чтобы скрыть div при нажатии за пределами «ajaxcart». Я создал новый div с position: absolute; чтобы заполнить всю область тела за «ajaxcart». А затем используйте это, чтобы вместо этого закрыть «ajaxcart».

$('lightbox').click(function() {
      $('lightbox').show().addClass('fadeOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('fadeOut');
            $(this).hide();
        });
        $('ajaxcart').show().addClass('slideOutRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
        function() {
          $(this).removeClass('slideOutRight');
          $(this).hide();
        });
    });
person vemund    schedule 17.07.2017