1

我有一个使用 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)

4

3 回答 3

2

添加.on在文档上。

$(document).on('click','a.ajax-btn',function(){   });
于 2013-03-25T06:56:39.260 回答
1

尝试on

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

live 在 jquery 1.8 中被弃用并在 1.9 中被删除.. 所以使用on()

于 2013-03-25T06:52:33.260 回答
1

给你的按钮一个 CSS 类并使用它

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

这将起作用，因为默认情况下，大多数事件会从原始事件目标冒泡到文档元素。虽然这会降低性能，但单击事件很少发生，您可以将其用作解决问题的方法。然后，当您有时间时，请尝试通过仔细查看您的页面周期来了解为什么使用委托不起作用。

于 2013-03-25T06:55:12.267 回答