Question

我刚刚使用了我的rails3应用程序的jquery函数。当用户单击页面上的复选框时，它会切换状态并淡出：

 $('#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!');
      }
  });
});

最初我想使用$（this）而不是$（'＃complete_task_1'），但我无法使用它。现在，它一切正常。

我的问题是我需要在选中一个框后手动重新加载页面 - 否则，当我单击另一个项目复选框时，似乎没有调用js。这不是成功或错误。开发日志中也没有任何内容。

有一个简单的方法吗？

Answer 1

最初我想使用$（this）而不是$（'＃complete_task_1'）但是我无法使用它。

那个问题很简单，因为this取决于函数的调用方式，而不是函数的定义。由于jQuery正在调用success函数，因此this由jQuery设置。

你可以通过this参数告诉jQuery在回调中应该是什么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）。我的猜测是，更新状态后，当您刷新页面时，一个复选框现在代表不同的项目。

使用与相关复选框的 all 匹配的类选择器或结构选择器，而不是使用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。

强制在ajax请求后重新加载页面

1 个答案: