0

试图找出为什么这个 jQuery JS 没有进行 ajax 调用，尽管它被调用来执行。

我有这个按钮可以向控制器中的方法发出 ajax GET 请求，该方法将部分呈现。当我单击按钮时，我看不到控制台上出现任何请求，但我在浏览器上看到警报“测试”。
我有与其他参数相同的完全相同的 JS，其他参数适用于其他 ajax 调用，所以我只是复制了其中一个并更改了所有必需的参数，期望它可以立即工作。我在控制台上都没有收到任何错误。我的路线和 id 名称很好并且经过验证。我在这里想念什么？

查看 - 注意：此按钮是通过不同的 ajax 呈现的，该部分有效。

<%= button_tag "Add / Remove", :id => "add_remove_button", :onclick => "javascript:add_remove();" %> #note: this is buried under div tags in a html table

JS-

 function add_remove(){
$('#add_remove_button').click(function() {
      $.ajax({
        type: 'GET',
        url: "/item/add_remove", 
        success:$('#view_item').html(data)

        /*function(){  },
        data:$('#test').serialize(),
        error: function(){  },
        success: function(data){   },
        complete: function (){   }*/
        }); #No ajax call made
/*return false;*/
});
alert('test'); #I get this alert
}
4

2 回答 2

1

您将始终看到这一点，alert()因为click()它是异步的：function()传递给 click 的代码在您单击之前不会执行，但其余部分add_remove()将被调用。

以下是您的代码中实际发生的情况，这解释了为什么没有进行 AJAX 调用：

  1. 使用:onclick => ...附加add_remove()到您的按钮。
  2. 您单击按钮，add_remove()被调用并将另一个单击回调附加到您的按钮。然后add_remove()调用alert(). 这里没有发生 AJAX 调用，只是添加了一个新的点击处理程序，并发送了一个警报。
  3. 您第二次单击该按钮，您将向该按钮附加第三次单击回调。但是，由于您在第一次单击按钮时还附加了一个单击处理程序，因此您应该在此处看到一个 AJAX 请求。
  4. 第三次点击，这次你会看到两个AJAX请求，一共是3个AJAX请求。

这就是你真正想要做的。从按钮中删除 :onclick => ... ：

<%= button_tag "Add / Remove", :id => "add_remove_button" %>

当页面首次加载时，将单击事件附加到按钮：

$(function(){
  $('#add_remove_button').click(function() {
    $.ajax({
      type: 'GET',
      url: "/item/add_remove", 
      success: function(data) { $('#view_item').html(data); },
      data: $('#test').serialize(),
      error: function(){  },
      success: function(data){   },
      complete: function (){   }
    });
    return false;
  });
});
于 2012-04-21T15:30:03.223 回答
0

您正在混合 jquery-registering-callbacks 样式和旧的事件处理程序属性。所以你在调用 add_remove 函数时触发了注册。

只需删除 :onclick 的东西和function add_remove(){ ... }

于 2012-04-21T15:31:30.353 回答