javascript jQuery 绑定 ajax：成功在新创建的（ajax）项目的 rails 3 应用程序中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11406805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery bind ajax:success not working in rails 3 app for newly created (ajax) items
提问by Anthony
**Edited this post because I found the problem is really in the inability of rails to bind to the ajax:success function.
**编辑这篇文章是因为我发现问题确实在于 rails 无法绑定到 ajax:success 函数。
***Using rails 3.2.3
***使用导轨 3.2.3
Thanks for taking the time to read and try to help.
感谢您抽出时间阅读并尝试提供帮助。
I am adding a simple fade out function on the ajax:success of an item being deleted, as follows:
我在 ajax:success of an item 上添加了一个简单的淡出函数，如下：
$(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.
After this, I wanted to create an object with unobtrusive jQuery when the user adds something, and have working delete buttons on those as well. I made a create.js.erb file that is called after creating a new item - and the creation works fine, but the delete button cannot access the ajax:success event.
在此之后，我想在用户添加内容时使用不显眼的 jQuery 创建一个对象，并在这些对象上设置删除按钮。我创建了一个 create.js.erb 文件，在创建新项目后调用该文件 - 创建工作正常，但删除按钮无法访问 ajax:success 事件。
It does delete the data from the db when clicked, but the .fadeOut is never bound to it, so it doesn't disappear. The create.js.erb is as follows:
单击时它会从数据库中删除数据，但 .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();
});
If I change this to bind to the click function, it works, but this doesn't account for a failed ajax call:
如果我将其更改为绑定到 click 函数，它会起作用，但这并不能解释失败的 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();
});
So something must be up with binding to the ajax:success after the item is created. You guys have any idea why this might be happening? Do I need to do something special in rails to get the newly rendered item to recognize ajax events? Any direction would be much appreciated!
因此，必须在创建项目后绑定到 ajax:success 。你们知道为什么会发生这种情况吗？我是否需要在 rails 中做一些特殊的事情来让新渲染的项目识别 ajax 事件？任何方向将不胜感激！
P.S. The controller for the delete method is below in case anyone might be able to detect a problem there:
PS 删除方法的控制器如下，以防任何人都能够在那里检测到问题：
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
回答by Ivan Fong
The problem sounds like the bind is happening before the element is generated. Try this:
问题听起来像是在生成元素之前发生了绑定。试试这个：
$(document).on('ajax:success', '.delete', function(e) {
$(e.currentTarget).closest('div').fadeOut();
});
回答by André Pankratz
I had the same issue, because my form handler method returned a plain string. Be sure to render something jQuery can process:
我遇到了同样的问题，因为我的表单处理程序方法返回了一个普通字符串。一定要渲染一些 jQuery 可以处理的东西：
def handle_form
...
render :json => {:what => 'ever'}
# or
render :nothing => true
end
回答by Ravenstine
Even though this is an old question, I have an updated answer for what works out to be the same issue.
尽管这是一个老问题，但我有一个更新的答案，说明什么是同一个问题。
As of version 1.9, jQuery will no longer consider an empty repsonse(render nothing: true) to be a success/done. This means that in your controller you should return an empty JSON object instead.
从 1.9 版开始，jQuery 将不再认为空的响应（不渲染：真）是成功/完成。这意味着在您的控制器中，您应该返回一个空的 JSON 对象。
respond_to do |format|
format.json { render: {}.to_json }
end
respond_to do |format|
format.json { render: {}.to_json }
end
回答by xiaodaidai
I've done similar things recently using Rails 3.2.3. I also use
我最近使用 Rails 3.2.3 做过类似的事情。我也用
$('#dialog-form').bind('ajax:success', function() {
})
and it works fine...
它工作正常......
回答by reto
Check if you get a parse error (or similar) by catching ajax:completed. Check the statusargument there. In my case it was a parseerrordue to a mimetype mismatch.
通过 catch 来检查是否出现解析错误（或类似错误）ajax:completed。检查status那里的论点。就我而言，这是parseerror由于 mimetype 不匹配造成的。
You can also set a breakpoint in jquery_ujs.js.
您还可以在jquery_ujs.js.
See also this question jQuery ajax request not triggering JS response
回答by emptywalls
For me it's because we are using slim, and the templates are 'name.slim'. if we change them to 'name.slim.html', the ajax:success fires correctly.
对我来说，这是因为我们使用的是 slim，并且模板是“name.slim”。如果我们将它们更改为“name.slim.html”，则 ajax:success 会正确触发。
The solution I am using is to add the format to the render declaration in the controller.
我使用的解决方案是将格式添加到控制器中的渲染声明中。
So we've got something like this:
所以我们有这样的事情：
render :new, layout: false, formats: [:html]
回答by Aleks
Even it is an old question, none of the answers really helped me as I had a custom confirmation dialog and the ajax:success was triggering on totally different element.
即使这是一个老问题，但没有一个答案真正对我有帮助，因为我有一个自定义确认对话框，而 ajax:success 是在完全不同的元素上触发的。
In order to find which element is trigered by your ajax in such case, you can first use code:
在这种情况下，为了找到由 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
});
