Ajax調用正在打破JQuery的切換功能

我有一個基本的切換功能，當最初點擊的項目它發送一個AJAX帖子，當第二次點擊時，它發送第二個不同的Ajax帖子。Ajax調用正在打破JQuery的切換功能

問題是一旦它使ajax調用，第二個切換功能不再觸發。

當我從開關中刪除ajax函數，並用一個基本的顯示/隱藏div代替它們時，它工作得很好，第一次和第二次點擊。

下面是我的代碼：

你會發現我有一個基本的顯示/隱藏功能的第一次點擊，用於測試目的。使用此代碼，第一次點擊工作，第二次點擊工作，並進行ajax調用，但任何點擊後不做任何事情。

//Sort by Instrument ACS or DESC 
$("th#seeking").toggle(function() 

    { // first click update sorting order 


$("a.add_listing").hide(200); 
$("a.add_listing").show(200); 

    }, 
    function() 
    { // On second Click toggle opposite sorting order 


    $.ajax({ 
     type: "POST", 
     url: "ajax_calls.php", 
     data: "order=instrument_asc&sort_item=true", 
     success: function(r){$("#listings").html(r);}, 
     error: function(){alert(2);$("#error").text("Could not retrieve posts").fadeIn(300).delay(900).fadeOut(300)} 
    }) 





    });

對此的任何幫助將非常感激。非常感謝

來源

2011-03-28 Levi

你得到的控制檯上的錯誤？ – 2011-03-28 15:04:41

表頭*內*無論「#listings」是什麼？換句話說，AJAX響應是否取代了首先設置了切換開關的HTML？ – Pointy 2011-03-28 15:06:39

@felix沒有錯誤顯示在firbug。第二次點擊後，任何進一步的點擊都不會做任何事情。 – Levi 2011-03-28 15:07:59

如果包含被單擊的元素的頁面部分被AJAX結果替換，則處理程序將丟失。你可以做這樣的事情，而不是：

$(function() { 
    var toggleState = 0; 
    $('body').delegate('th#seeking', 'click', function() { 
    if (toggleState === 0) { 
     $("a.add_listing").hide(200); 
     $("a.add_listing").show(200); 
    } 
    else { 
     $.ajax({ 
     type: "POST", 
     url: "ajax_calls.php", 
     data: "order=instrument_asc&sort_item=true", 
     success: function(r){$("#listings").html(r);}, 
     error: function(){ 
      alert(2); 
      $("#error").text("Could not retrieve posts") 
      .fadeIn(300).delay(900).fadeOut(300) 
     } 
     }); 
    } 
    toggleState = toggleState^1; 
    }); 
});

，設置了一個「點擊」處理程序並跟蹤切換狀態的明確，但它使對事件的處理工作，因爲它泡到<body>（你如果你願意的話，可以把處理程序放在DOM中更近的容器中）。因此，即使您替換頁面片段，只要新片段在表頭上具有該「id」值，委派的事件處理程序就會「看到」它。

編輯 —我改變了小幅表明，則應在「準備就緒」的處理程序進行，或以其他方式使得<body>元素在DOM存在。如果代碼在<head>中的<script>塊中運行，而不被設置爲「就緒」或「加載」處理程序，那麼<body>將不會出現，它將不會執行任何操作。

編輯再次 — Here是僞造的示範影片。上面的代碼中有一個很大的（在結尾處缺少「}）」，我已經在那個小提琴中修復了，我也會在這裏修復。

來源

2011-03-28 15:17:50 Pointy

謝謝一堆，這確實有道理。但有一個問題，上面的代碼不適合我。我是否需要將上述功能附加到onlclick事件或此類？ – Levi 2011-03-28 15:20:57

那麼，「委託」電話應設置處理程序。不幸的是（由於ajax部分），在jsfiddle中顯示這個工作有些棘手。代碼應該可以在jQuery「ready」處理程序中運行;我將編輯答案以反映這一點。 – Pointy 2011-03-28 15:23:31

再次感謝。我有它在一個document.ready函數。我在firebug中看到一個錯誤，當我添加上面的代碼，在函數體後添加「missing}」我試圖在缺少的括號中添加，並且錯誤離開但代碼仍然不起作用。有任何想法嗎？再次感謝您的時間和幫助 – Levi 2011-03-28 15:34:27

我會用jquery.live（）將是一個很好的解決方案，像答案在這裏看到有想到： Using jQuery .live with toggle event

來源

2011-03-28 15:40:41

Ajax調用正在打破JQuery的切換功能

回答

相關問題