$ .ajax() GET цикл после каждого щелчка по ссылке

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

I «ве заметил несколько вещей:

Ваш 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(); 

Кроме того, вы должны дать простор вашей «жанр» переменной, определив его как этот

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

Не положительной они вызывают ошибку, но они не помогают! :)

Cp

==== EDITED =====

Juhana решена ошибка :)