是）我有的：
我有我通过AJAX提交表单。
<%= form_for([@map, @annotation], :remote => true ) do |f| %>
...
<%= f.submit "Save annotation", :class => "btn btn-primary", :id => "annotation-submit-button" %>
<% end %>
我想要的是：
我想，以避免重复的提交。 由于当请求成功完成表单只消失，用户可以单击只要数据库尚未写完的数据提交按钮。 我不希望出现这种情况，很明显。
我已经试过：
我尝试添加这submit按钮本身 - 但它不工作。 该按钮被禁用，但没有数据发送。
:onclick => "this.disabled = true"
我也尝试添加一个单击处理程序的提交按钮。 这和以前有同样的效果。 没有数据实际发送到控制器，但按钮被禁用。
$("#annotation-submit-button").click(function(event) {
$(this).attr("disabled", "disabled");
return false;
});
也试过同样不返回false 。 该按钮被禁用后，没有任何反应。
$("#annotation-submit-button").click(function(event) {
$(this).prop("disabled", "disabled");
});
我开始认为这是值得的Rails的具体情况？
尝试disable_with在这样的视图为Rails 3及以上：
<%= f.submit "Save annotation", :data => {:disable_with => "Saving..."}, ... %>
对于梁2：
<%= f.submit "Save annotation", :disable_with => "Saving...", ... %>
禁用按钮应该只是罚款。
只需在您执行AJAX调用同样的功能禁用按钮。
$("#annotation-submit-button").click(function(event) {
// do ajax call
$.ajax(...);
// disable the button
$(this).prop("disabled", true);
// prevent the standard action
return false;
});
然而，在jQuery 1.6的你应该使用prop()代替attr()
编辑：
在回答您的评论您忽略了return false; 所以你不要打断通过导轨formsubmit的执行。
$("#annotation-submit-button").click(function(event) {
// disable the button
$(this).prop("disabled", "disabled");
// do not return false since this stops the event propagation
});
的jQuery：你可以做以下处理所需的操作
$.ajax({
.....,
beforeSend: function (){ $('#your-button').attr('disabled', 'disabled'); },
success: function (){
// Here you can enable the button
}
});
希望这可以帮助你
总之，审核后你的想法和我的团队讲，我们得到了一个解决方案：
(function ($) {
/**
* 使用：
* 在jquery的ajax方法中加入参数:beforeSend
* 例如：beforeSend: function(){return $.preventMultipleAjax(event, 5000)}
*
* @param event
* @param delay_duration
* @returns {boolean}
*/
$.preventMultipleAjax = function (event, delay_duration) {
delay_duration = delay_duration || 3000;
var target = $(event.target);
var last_click_time_stamp = target.attr("_ajax_send_time_stamp") || 0;
var time_duration = last_click_time_stamp ? event.timeStamp - last_click_time_stamp : 0;
//console.debug("preventMultipleAjax", last_click_time_stamp, time_duration);
if (time_duration && time_duration < delay_duration) {
return false;
} else {
//console.debug("skip preventMultipleAjax~");
target.attr("_ajax_send_time_stamp", event.timeStamp);
return true;
}
};
/**
* 防止按钮重复点击。
* NOTICE: #1 需要在作用点之前调用此方法 #2 stopImmediatePropagation 会阻止后面的所有事件包括事件冒泡
* @delay_duration 两次点击的间隔时间
*/
$.fn.preventMultipleClick = function (delay_duration) {
delay_duration = delay_duration || 3000;
var last_click_time_stamp = 0;
var time_duration = 0;
$(this).bind('click', function (event) {
time_duration = last_click_time_stamp ? event.timeStamp - last_click_time_stamp : 0;
//console.debug("preventMultipleClick", last_click_time_stamp, time_duration);
if (time_duration && time_duration < delay_duration) {
event.stopImmediatePropagation();
} else {
//console.debug("skip preventMultipleClick~");
last_click_time_stamp = event.timeStamp;
}
});
};
})(jQuery);
如果你喜欢它，我会增加一条，作为一个小插件〜谢谢您的建议〜
