jQuery绑定ajax:成功地不在rails3app中为新创建的(ajax）项工作

jQuery bind ajax:success not working in rails 3 app for newly created (ajax) items

本文关键字：ajax 新创建 创建 工作 成功 绑定 rails3app jQuery      更新时间：2023-09-26

**编辑这篇文章是因为我发现问题实际上在于rails无法绑定到ajax：success函数。

***使用轨道3.2.3

感谢您花时间阅读并尽力提供帮助。

我在ajax上添加了一个简单的淡出功能：成功删除一个项目，如下所示：

$(document).ready( jQuery(function($) {
    $('.delete').bind('ajax:success', function() {
        $(this).closest('div').fadeOut();
    });
}));
#For some reason had to pass the $ into the function to get it to work,
#not sure why this is necessary but doesn't work unless that is done.

在这之后，我想在用户添加内容时使用不引人注目的jQuery创建一个对象，并在这些对象上设置工作删除按钮。我制作了一个create.js.erb文件，该文件在创建新项目后调用，创建工作正常，但删除按钮无法访问ajax：success事件。

它确实会在单击时从数据库中删除数据，但.fadeOut从未绑定到它，因此它不会消失。create.js.erb如下所示：

#$("div").append(html) here, then call the function below to try and bind the ajax:success function
$('.delete').bind('ajax:complete', function() {
    $(this).closest('div').fadeOut();
});

如果我将其更改为绑定到点击函数，它会起作用，但这并不能解释ajax调用失败的原因：

#$("div").append(html) here, then call the function below to try and bind the ajax:success function
    $('.delete').bind('click', function() {
        $(this).closest('div').fadeOut();
    });

因此，绑定到ajax一定有问题：项目创建后的成功。你们知道为什么会发生这种事吗？我是否需要在rails中做一些特殊的事情来让新呈现的项识别ajax事件？任何方向都将不胜感激！

附言：删除方法的控制器如下，以防任何人都能检测到问题：

def destroy
    @user = User.find(params[:user_id])
    @item = @user.item.find(params[:id])
    @item.destroy
    respond_to do |format|
      format.html { redirect_to user_path(@user) }
      format.json { head :no_content }
      format.js { render :nothing => true }
    end
end

这个问题听起来像是在生成元素之前发生了绑定。试试这个：

$(document).on('ajax:success', '.delete', function(e) {
    $(e.currentTarget).closest('div').fadeOut();
});

我也遇到了同样的问题，因为我的表单处理程序方法返回了一个纯字符串。一定要呈现jQuery可以处理的东西：

def handle_form
  ...
  render :json => {:what => 'ever'}
  # or
  render :nothing => true
end

我最近使用Rails 3.2.3做了类似的事情。我也使用

$('#dialog-form').bind('ajax:success', function() {
})

而且效果很好。。。

尽管这是一个老问题，但我有一个更新的答案来回答同样的问题。

从1.9版本起，jQuery将不再认为空的repsonse（rendernothing:true）是成功/完成的。这意味着您应该在控制器中返回一个空的JSON对象。

respond_to do |format| format.json { render: {}.to_json } end

通过捕获ajax:completed检查是否出现解析错误（或类似错误）。检查那里的status参数。在我的案例中，由于mimetype不匹配，它是一个parseerror。

您也可以在jquery_ujs.js中设置断点。

另请参阅此问题jQuery ajax请求未触发JS响应

对我来说，这是因为我们使用的是slim，模板是"name.slim"。如果我们将它们更改为"name.slam.html"，则ajax：成功将正确启动。

我使用的解决方案是将格式添加到控制器中的呈现声明中。

所以我们有这样的东西：

render :new, layout: false, formats: [:html]

尽管这是一个老问题，但没有一个答案真正帮助我，因为我有一个自定义的确认对话框，而ajax：成功是在完全不同的元素上触发的。

在这种情况下，为了找到ajax触发的元素，您可以首先使用代码：

$(document).on('ajax:success', 'a', function(evt, data, status, xhr) {
    $( ".log" ).text( "Triggered ajaxComplete handler." );
    // Check what is the value of $(this), and you will see what button has triggered the ajax success action, and you can start from there
});
相关文章：