Question

我有一个功能：

if (typeof history.pushState !== "undefined") {
        var historyCount = 0;
        $('.pytania a , .kontakt a , .ofirmie a , .cennik a').click(function(){
            var getlink = $(this).attr('href');
            $.ajax({url: getlink,success: function(data) {
                $('.container_right_wrapper').hide('slide', {direction: 'left'}, 300, function(){
                $(this).html(data).show('slide', {direction: 'right'}, 300);
                $( ".pageicon img" ).remove();
                var image = $('.container_right_wrapper .attachment-post-thumbnail').prop('src') ;
                $('.pageicon').append('<img src="'+image+'"/>');
                $('.logo').prepend('<a href="<?php echo site_url(); ?>"></a>');
                });
            }
            });
            history.pushState(null, null, getlink);
            return false;
        });
        $('.projekty a').click(function(){
            var projekty = $(this).attr('href');
            $.ajax({url: projekty,success: function(data) {
                $('.container_right_wrapper').hide('slide', {direction: 'left',easing:'linear'}, 200, function(){
                $(this).html(data).show('slide', {direction: 'right',easing:'easeOutQuart'}, 200);
                carousel();
                $( ".pageicon img" ).remove();
                var image = $('.container_right_wrapper .attachment-post-thumbnail').prop('src') ;
                $('<img src="'+image+'"/>').appendTo('.pageicon');
                });
            }
            });
            history.pushState(null, null, projekty);
            return false;
        });
        $('.logo a').click(function(event){
            event.preventDefault();
            var homepage = $(this).attr('href');
            $.ajax({url: homepage, success: function(data) {
                $('.container_right_wrapper').hide('slide', {direction: 'left'}, 200, function(){
                $(this).html(data).show('slide', {direction: 'right'}, 200);
                $( ".pageicon img" ).remove();
                var image = $('.container_right_wrapper .attachment-post-thumbnail').prop('src');
                $('.pageicon').append('<img src="'+image+'"/>');
                slider();
                });
            }
            });
            history.pushState(null, null, homepage);
            return false;
        });
        window.onpopstate = function(){
            if(historyCount) {
                goTo(document.location);
            }
            historyCount = historyCount+1;
        };
    }

在它的第一部分，当你点击一个链接（pytania a，kontakt a等）时，它会使用ajax进入该页面。它还在.logo div中创建链接（确切地说是lint到hmepage）。但是当我点击创建的链接时，它不会使用ajax转到主页。我尝试在click函数上使用event.prevent默认值（正如你在函数的第三部分中看到的那样）但是没有成功，我错过了什么？

Answer 1

您必须使用委派的事件处理程序并使用preventDefault来阻止默认导航：

$('.logo').on('click', 'a', function (e) { e.preventDefault(); /* ... */ });

因为当你第一次将处理程序分配给.logo a时，元素是不存在的，所以处理程序永远不会被实际分配。

使用委托处理程序，处理程序被分配给.logo，它从一开始就存在于页面中，但只有在事件从a元素冒泡时才会触发。

请参阅documentation about delegated event handling

另请注意，在字符串中：

'<a href="<?php echo site_url(); ?>"></a>'

<? ... ?>将保持原样，因为不会在客户端评估php代码

单击链接时Ajax不起作用，为什么？

1 个答案: