多个.not() in按钮不起作用，除非我刷新该特定页面上的页面

Question

我有一个我正在开发的ajax网站。我有它，这样它就不会重新加载与它相同的页面

​

        $('a.ajax-link').not('.active').not('.selected').not('.btn-disabled').on('click', function(e) {
            if ($('#menu-overlay').hasClass("active")){
                CloseAction();
                setTimeout( function(){
                    $(".page-overlay").addClass("from-bottom");
                    $('#main').addClass('hidden');
                } , 3000 );
            }

            else{
                MenuOpen = "0";
                $(".page-overlay").addClass("from-bottom");
                $('#main').addClass('hidden');
            }

        });

       //trigger smooth transition from the actual page to the new one 
       $('body').not('.active').not('.selected').not('.btn-disabled').on('click', '[data-type="page-transition"]', function(event){
                
        if($(this).attr('target') || !AjaxLoad || $(this).attr('href') == '#'){
					return true;
				}
				event.preventDefault();

				var newPage = $(this).attr('href'),
					oldPage = window.location.pathname.substr(window.location.pathname.lastIndexOf('/') + 1),
                    selectedPage = $(this).hasClass("selected");

				if(newPage == oldPage){
					return true;
				}
                if(selectedPage == true){
					return true;
				}
                
                if ( MenuOpen == "1" ){
                    CloseAction();
                    setTimeout( function(){
                        // Load new page
                        if( !isAnimating ) changePage(newPage, true);
                        firstLoad = true;
                    } , 3000 );
                }
                else{
                    // Load new page
                    if( !isAnimating ) changePage(newPage, true);
                    firstLoad = true;
                }
                
            });

<li>
                    <a id="contact-trigger" class="ajax-link" href="contact.html" data-type="page-transition">
                        <i class="fa fa-envelope-square fa-2x"></i>
                    </a>
                </li>

​

但是当你从“index”开始，转到“contact”，按钮就不能正常工作了，它仍然会重新加载页面并被卡住，因为ajax不会让它通过，因为它不应该让它通过。现在，如果我从“contact”开始，并再次单击contact触发器，它就会正常工作。那么问题出在哪里呢?为什么它不能按照从特定页面开始的方式工作呢？

Answer 1

使用提供的代码，如果您不希望页面在单击函数时刷新，则需要添加preventDefault() & stopPropagation()；

$('a.ajax-link').not('.active').not('.selected').not('.btn-disabled').on('click', function(e) {
        e.preventDefault();
        //removes the default click
        e.stopPropagation();
        //Prevents the event from bubbling up the DOM tree
        if ($('#menu-overlay').hasClass("active")){
            CloseAction();
            setTimeout( function(){
                $(".page-overlay").addClass("from-bottom");
                $('#main').addClass('hidden');
            } , 3000 );
        }

        else{
            MenuOpen = "0";
            $(".page-overlay").addClass("from-bottom");
            $('#main').addClass('hidden');
        }

    });

Answer 2

解决了。感谢你的帮助......

必须改变功能和工作方式。