強制重新加載頁面後ajax請求

Question

我剛剛有一個jQuery的功能與我的rails3應用程序工作。當用戶點擊頁面上的複選框，按下該鍵則狀態和淡出：

$('#complete_task_1').click(function() { 
    $.ajax({ 
    url: $(this).attr('href'), 
    type: 'get', 
    dataType: 'html', 
    success: function(data, textStatus, jqXHR) { 
     $('#complete_task_1').closest('tr').fadeOut(); 
    }, 
    error: function(data, status, error){ 
     alert('Oooops!'); 
     } 
    }); 
}); 

起初我想用$（本），而不是$（「＃complete_task_1」），但我不能拿到加工。現在，它一切正常。

我的問題是，我需要手動重新加載頁面後，選中一個框 - 否則，當我點擊另一個項目複選框，js似乎並沒有被調用。這不是成功或錯誤。開發日誌中也沒有任何東西。

有沒有簡單的方法呢？

Answer 1

最初我想用$（this）而不是$（'＃complete_task_1'），但我無法得到那個工作。

這問題是容易的，這是因爲this由函數如何被調用決定，而不是在那裏的定義。由於jQuery正在調用您的success函數，因此this由jQuery設置。

你可以告訴jQuery的什麼this應該是回調內部通過context參數：

$('#complete_task_1').click(function() { 
    $.ajax({ 
    url: $(this).attr('href'), 
    type: 'get', 
    dataType: 'html', 
    context: this, 
    success: function(data, textStatus, jqXHR) { 
     $(this).closest('tr').fadeOut(); 
    }, 
    error: function(data, status, error){ 
     alert('Oooops!'); 
     } 
    }); 
}); 

...或者因爲你已經調用$(this)一次，我不願看到不必要的重複，你可以使用你已經關閉了範圍：

$('#complete_task_1').click(function() { 
    var $this = $(this); 
    $.ajax({ 
    url: $this.attr('href'), 
    type: 'get', 
    dataType: 'html', 
    success: function(data, textStatus, jqXHR) { 
     $this.closest('tr').fadeOut(); 
    }, 
    error: function(data, status, error){ 
     alert('Oooops!'); 
     } 
    }); 
}); 

我的問題是，我需要檢查一個框後手動刷新頁面 - 否則，當我點擊另一個項目複選框，js似乎沒有被調用。這不是成功或錯誤。開發日誌中也沒有任何東西。

您在代碼中使用了一個ID，因此您只會連接一個複選框（因爲ID爲must be unique on the page）。我的猜測是更新狀態，當你刷新頁面時，一個複選框現在代表不同的項目。

不使用ID選擇器，而是使用與您的相關複選框匹配的所有的類選擇器或結構選擇器。它看起來像是在複選框上使用href來區分它們，所以除了標記和初始選擇器之外，沒有任何代碼更改。

所以，如果你想使用一個類上的複選框：

$('.someclass').click(function() { ... 

或者，如果他們都在一個容器中，你可以使用一個結構（在這種情況下，後裔）選擇：

$('#the_container input:checkbox').click(function() { ... 

---

更新：這是一個完整的工作示例（住副本）：

HTML：

<table id="container"> 
    <tbody> 
    <tr> 
     <td> 
     <label> 
      <input type="checkbox" data-href="http://jsbin.com/amiruf/1"> 
      One 
     </label> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <label> 
      <input type="checkbox" data-href="http://jsbin.com/amiruf/2"> 
      Two 
     </label> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <label> 
      <input type="checkbox" data-href="http://jsbin.com/amiruf/3"> 
      Three 
     </label> 
     </td> 
    </tr> 
    </tbody> 
</table> 

這些網址只是

Response 1

...或2或3回覆

的JavaScript：

jQuery(function($) { 

    $("#container input:checkbox").click(function() { 
    var $this = $(this); 
    $.ajax({ 
     url: $this.attr("data-href"), 
     dataType: "text", 
     success: function(data) { 
     $this.closest("tr").fadeOut(); 
     display(data); 
     }, 
     error: function() { 
     display("Error"); 
     } 
    }); 
    }); 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 

}); 

---

關 - 主題：它看起來像您在複選框上使用href屬性。這是無效的HTML，href不是input[type=checkbox]的有效屬性。您可能會考慮將其更改爲data-href，這會使其成爲valid as of HTML5。