强制重新加载页面后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。