Question

我有一个使用ajax加载我的一个站点内容的函数。

这一切都很好，但在某些部分，因为带来了更多链接的新内容我需要使点击功能成为实时点击功能，但是当我这样做时，ajax停止工作，它只是正常更改页面（没有ajax）

这是我的代码

function ajaxLoads(){

    var $btn = $('a.ajax-btn');
    var $container = $('#load');
    var siteTitle = document.title;
    //var $artistBG = $('#artist-viewport img');

    $btn.click(function(e){

        console.log();

        e.preventDefault();
        $btn.removeClass('selected');
        //$artistBG.removeClass('top');

        var sourceTarget = $(this).data('page'),
        slideWidth = $container.width(),
        $this = $(this),
        $background = $this.data('background'),
        pageUrl=$this.attr('href'),
        pageTitle = $this.html();
        //$changeTo = $("#artist-viewport img[data-background='"+ $background +"']");

        $this.addClass('selected');
        //$changeTo.addClass('top');
        $container.animate({'right':-slideWidth}, 300, 'easeInExpo');

        $container.load(pageUrl+" "+sourceTarget, function(){

            subNav();   

            $("html, body").animate({ scrollTop: 0 }, 500, 'easeInExpo', function(){
                $container.animate({'right':0}, 300, 'easeInExpo');
            });         

            var pageContent = $(this).html();

            window.history.pushState({"html":pageContent, "pageTitle": pageTitle},"", pageUrl);
            //document.title=pageTitle+" :: "+siteTitle;

        }); // end load function    

    }); // end click function   

    window.onpopstate = function(e){
        if(e.state){
            $container.css('opacity', 0).html(e.state.html).fadeTo('fast', 1);
            document.title=e.state.pageTitle+" :: "+siteTitle;
        }
    };  

}

我尝试更改$btn.click(function(e) to $btn.live('click', function(e) and to $btn.on('click', function(e)

Answer 1

在文档上添加.on。

$(document).on('click','a.ajax-btn',function(){   });

Answer 2

尝试on

 $('#load').on('click', '.ajax-btn', function(){
     ...
 });

live在jquery 1.8中已弃用，已在1.9中删除..因此请使用on()

Answer 3

给你的按钮一个css类并使用这个

$(document).on("click",".yourcssclass",function(e){});

这将起作用，因为默认情况下，大多数事件从原始事件目标冒泡到文档元素。虽然这会降低性能，但是不经常发生点击事件，您可以使用它来解决问题。然后当你有时间，尝试通过仔细查看页面周期来了解使用代理的原因。

更改为live或on时，click功能不起作用

3 个答案: