Question

我有一个网页，其页面的内容由ajax加载。我的所有页面实际上都是单独的文件，当我需要调用页面时，我只是将链接传递给我的“pageLoader”函数。

pageLoader句柄，内容加载并重新点亮/重新定义必要的功能，如关闭按钮。

由于实际函数有大约250行，我确实重写了一个简短的版本;

var pageLoader = function(link){
    var page = $(link).attr("href").replace('#','');

    if(page != lastCalledURL){

        // Load the page.

        $.ajax({
            beforeSend: function(){ /* remove previously loaded content; */ },
            success: function(data){

                // remove the loaded content if user clicked to close button.

                $("a.close-button").live("click", function(){
                    $(this).parent().fadeOut().remove();
                    return false;
                });

                // load another page if user click another page's link.


                $("a.content-loader-link").live("click",function(){
                    pageLoader(this);
                });

                // handle with tabs

                $("a.tabs").live("click", function(){
                    var index = $("a.tabs").index(this);
                    console.log(index);
                    return false;
                    });

            }
        });

        lastCalledURL = page;

    }

    return false;

行。如果我单击页面中的链接，它会调用pageLoader。如果我只点击其中一个链接，则pageLoader调用一次。如果我单击另一个链接，则pageLoader调用两次。如果我再次点击另一个链接，则pageLoader会第三次调用，依此类推。

与代码中的“live”函数绑定的链接也会发生同样的事情。如果我单击a.tabs，它会写入console twite。如果我点击另一个.tabs链接，它会向控制台写入四次并且每次点击都会增加一倍。

我不知道为什么会这样。如果您有任何想法，请告诉我。

Answer 1

您可以使用bind和unbind解决此问题。像这样：

$("a.tabs").unbind('click').bind("click", function(){
     var index = $("a.tabs").index(this);
     console.log(index);
     return false;
});

但我希望您在$（document）.ready函数中附加此事件，而不是每次进行AJAX调用时都会附加此事件。

$(document).ready(function() {
  // Attach your events here.
});

Answer 2

那些live事件处理程序"Attach a handler to the event for all elements which match the current selector, now and in the future."，因此您在ajax来电时不需要它们。

Ajax加载器和事件不止一次运行

2 个答案: