jQuery的負載腳本執行多次

Question

我有它加載的內容，應將其更換成一個div元素的簡單方法：

<script> 
console.log('Running...') 
</script> 

：

$("a[data-ajax='true']").on('click', function (event) { 
     event.preventDefault(); 
     var goToLink = this.href; 
     animateLink(this); 
     $('#ajax-target').fadeTo(0.2, 0.5, function() { 
      lastLink = currentLink; 
      currentLink = goToLink; 
      $('#ajax-target').load(goToLink, {}, function() { 
       $('body').scrollTop(0); 
       $('#ajax-target').fadeTo('slow', 1); 
      }); 
     }); 
    }); 

現在我每包含以下代碼AJAX的HTML代碼加載

我第一次點擊加載ajax的鏈接，我在控制檯上看到'Running ...'按預期方式運行。第二次我這樣做，'Running ...'在控制檯上打印兩次。第三次，我在控制檯上得到4次這樣的消息，依此類推。我無法弄清楚問題出在哪裏。當我根據ajax請求加載HTML代碼並將其替換爲每個html（）方法時，同樣的問題。有人知道什麼是錯的嗎？

編輯 答案後，在這裏我現在有下面的代碼其中工程：

<script> 
    var currentLink, lastLink; 

    function animateLink(obj) { 
     var el = $(obj); 
     var animate = el.attr('data-animation'); 
     if (animate != undefined) { 
      animate = animate.toLowerCase(); 
      animate = animate == 'false' ? false : true; 
     } else { 
      animate = true; 
     } 
     if (animate) { 
      el.toggle('explode'); 
     } 
    } 

    $(document).ready(function() { 
     $("a[data-ajax='true']").on('click', function (event) { 
      event.stopImmediatePropagation(); 
      event.preventDefault(); 
      var goToLink = this.href; 
      animateLink(this); 
      $('#ajax-target').fadeTo(0.2, 0.5, function() { 
       lastLink = currentLink; 
       currentLink = goToLink; 
       $('#ajax-target').load(goToLink, {}, function() { 
        $('body').scrollTop(0); 
        $('#ajax-target').fadeTo('slow', 1); 
       }); 
      }); 
     }); 
    }); 

    function historyBack() { 
     $('#ajax-target').fadeTo(0.2, 0.5, function() { 
      var newLink = lastLink; 
      lastLink = this.href; 
      currentLink = newLink; 
      $.get(newLink, {}, function (response) { 
       $('body').scrollTop(0); 
       $('#ajax-target') 
        .html(response) 
        .fadeTo('slow', 1); 
      }); 
     }); 
    } 
</script> 

這是坐落在網站上。當ajax請求完成時，這部分不會被刪除。它總是改變的部分如下：

<div class="content-wrapper" id="ajax-target"> 
    @Html.Partial("LayoutContentHeader") 
    <section class="content"> 
     @RenderBody() 
    </section> 
</div> 

網頁加載是一個MVC頁面，在主框架不包含任何HTML或BODY標籤，它需要被替換，另外只有內容有時腳本（如何我上面的腳本）：

@if (IsAjax) 
{ 
    if (isMainLayout) 
    { 

    @Html.Partial("LayoutContentHeader") 
    <section class="content"> 
     @RenderBody() 
    </section> 
    } 
    else 
    { 
     @RenderBody() 
    } 



    <script> 
     $(function() { 
      $('[data-toggle="tooltip"]').tooltip() 
     }) 
    </script> 
} 

正如你所看到的，當我們在一個Ajax請求，只送上我的重要內容。

而按壓鏈路的代碼是例如：

<a href="/wilhelmshaven/hse/" data-ajax="true" class="btn btn-block btn-social" style="color: white !important; background-color: rgb(243,156,18)"> 
    <i class="fa fa-th"></i>HSE 
</a> 

與周圍沒有鏈路（這可迫使鼓泡）。

Answer 1

嘗試添加該代碼

$("a[data-ajax='true']").on('click', function (event) { 

    event.stopImmediatePropagation(); 

    var goToLink = this.href; 
    animateLink(this); 
    $('#ajax-target').fadeTo(0.2, 0.5, function() { 
     lastLink = currentLink; 
     currentLink = goToLink; 
     $('#ajax-target').load(goToLink, {}, function() { 
      $('body').scrollTop(0); 
      $('#ajax-target').fadeTo('slow', 1); 
     }); 
    }); 
}); 

參考：http://api.jquery.com/event.stopimmediatepropagation/