Question

我正在尝试一些新功能，即使用$.ajax()加载每个页面。除了一件事，一切都很好！当我多次点击链接（导航）时，每次点击后一切都会自动循环。你可以在这里看到我的意思：/ website / sort / scifi（当我接受答案时，我会删除此链接）。我每次点击都使用console.log()，所以调出控制台。

我试图看看它是否是变量，但事实并非如此。我做了另一页（同样的事情 - 当我接受答案时我将删除此链接）以查看是否发生了同样的问题，但事实并非如此。

// KLICK: Sortera efter genre
$('body').on('click', '#genre', function() {

    // VARIABEL
    genre = $(this).attr('data');

    // VISA
    $('.loading').show();

    // INNEHÅLL
    $('.loading-content').html('Laddar sidan - var god vänta');


    // AJAX
    $.ajax({

        // AJAX: Adress till filen som ska hämtas
        url: '<?php echo url("view-genre/' + genre + '"); ?>',

        // AJAX: Vilken metod ska användas (GET eller POST)
        method: 'GET',

        // AJAX: Lyckades
        success: function(s) {

            // ADRESS
            history.pushState('', document.title, '<?php echo url("sort/' + genre + '"); ?>');

            // DÖLJ
            $('.loading').hide();

            // INNEHÅLL
            $('#content').html(s);

            console.log(genre);

        },


        // AJAX: Misslyckades
        error: function(e) {

        }

    });

});

如何防止此错误？

Answer 1

您使用Ajax加载的文件似乎包含与主页面相同的JavaScript代码。每次请求文件时，都会在链接上附加一个新的单击处理程序，这会在每次单击时有效地使处理程序加倍。

然后解决方案是不将脚本包含到已加载的文件中，或者如果由于某种原因不可能，请确保脚本未执行（有关示例，请参阅here。）

Answer 2

我注意到了一些事情：

您的HTML链接：

<a href="javascript:void(0)" id="genre" data="scifi" title="Visa andra filmer och TV-serier med den här genren">SciFi</a>

理想情况下会是

<a href="javascript:void(0); return false;" id="genre" data="scifi" title="Visa andra filmer och TV-serier med den här genren">SciFi</a>

或者，您可以通过在js

中实现（大致）等效

$('body').on('click', '#genre', function(e) {
    e.preventDefault();

另外，你应该通过像这样定义它来为你的'genre'变量赋予范围

var genre = $(this).attr('data');

不正确这些导致了这个错误，但它们没有帮助！：）

CP

==== EDITED =====

Juhana已经解决了这个问题：）

$ .ajax（）每次点击链接后进行GET循环

2 个答案: