Проблем със скриването на 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. event.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 с позиция: абсолютна; за да запълни цялата област на тялото зад „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