Аякс удваивает запросы на каждый клик?

Question

У меня есть 3 вкладки, и на 3-й вкладке я загружаю данные на 3-ю вкладку, но как только данные загружаются и я щелкаю 3-ю вкладку, она загружает данные дважды, т.е. отправляет запрос 2 раза, а когда я щелкаю 3-ю вкладкувремя удваивает запрос и отправляет 4 запроса и т. д.

Мой код:

// Separate Ajax call for coach stylish view Data
    $(document).on( "click", '.ajaxTab' , function( e ){
        e.preventDefault();
        var $this = $(this),
            loadUrl = $this.attr('data-href'),
            target = $this.attr('data-target');

        $.get(loadUrl, function(data) {
            $(target).html(data);
        });

        $this.tab('show');
        return false;
    });

Ссылка на вкладку:

<li><a class="ajaxTab" data-toggle="tabAjax" href="#" 
    data-href="<?php echo $this->CxHelper->Route('eb-admin-get-coach-stylish-view') ?>?userId={{userId}}" 
  data-target="#coach-view-stylish-ajax" 
 rel="tooltip">Coach View (Stylised)</a>
</li>

Answer 1

Используйте один вместо вкл.[http://api.jquery.com/one/][1]

$(document).one( "click", '.ajaxTab' , function( e ){
            e.preventDefault();
            var $this = $(this),
                loadUrl = $this.attr('data-href'),
                target = $this.attr('data-target');

            $.get(loadUrl, function(data) {
                $(target).html(data);
            });

            $this.tab('show');
            return false;
        });


  [1]: http://api.jquery.com/one/

Answer 2

Возможно, щелчок вызывается в инкрементном значении, я обычно вижу это, когда я устанавливаю прослушиватели щелчков в методе успеха ajax.

вы можете отменить привязку событий от .ajaxTab

  $(document).on( "click", '.ajaxTab' , function( e ){
        $('.ajaxTab').unbind();
        .........//the other logic
});

unbind, удаляет прослушиватели кликов из элемента

Answer 3

jQuery off метод для удаления существующего обработчика события щелчка http://api.jquery.com/off/

 $(document).off().on( "click", '.ajaxTab' , function( e ){
    e.preventDefault();
    var $this = $(this),
        loadUrl = $this.attr('data-href'),
        target = $this.attr('data-target');

    $.get(loadUrl, function(data) {
        $(target).html(data);
    });

    $this.tab('show');
    return false;
});