Question

在学习如何实现不显眼的js（使用Rails＆amp; jQuery）的早期阶段，我遇到了如何（重新）绑定提交按钮/表单的问题.load（ing）包含表单的新内容

我已经设置了一个“创建新项目”表单，以显示项目的顶部（当用户点击创建按钮时）

sale_case /显示/ _requirments_new.html.haml：

- form_for ([@sale_case, @sale_case_requirement]), :html => { :id => 'requirement_form', :class => "submit-with-ajax"} do |f|
...
%button{ :type => "submit" } Save Requirement

的application.js：

jQuery(document).ready(function() {
  jQuery(".submit-with-ajax").submitWithAjax();
}
...
jQuery.ajaxSetup({
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    jQuery.post(this.action, jQuery(this).serialize(), null, "script");
    return false;
  })
  return this;
};

requirements_controller.rb：

def create
  @sale_case_requirement = @sale_case.requirements.new(params[:requirement])
      if @sale_case_requirement.save
      @message = "Success..."
      @success = true
  #...
  respond_to do |format|
    format.js
  end
end

要求/ create.js.erb：

mesg("<%= @message %>");
<%- if @success %>
  jQuery("#requirement_form")[0].reset();
  jQuery('#requirements').load('<%= requirements_view_sale_case_requirements_path(@sale_case.id) %>' );
<% end %>

第一次不引人注目地运作良好。当用户创建第二个项目（在通过ajax加载的表单上）时出现问题。该按钮未绑定到submitWithAjax函数。你怎么做.load（ing）内容？

我最终不得不在部分（突兀）中这样做才能让它发挥作用，但它让我感到不能解决这个问题。：

%button{ :type => "submit", :onclick => "jQuery.post('#{sale_case_requirements_path(@sale_case.id, @sale_case_requirement.id)}', jQuery('#requirement_form').serialize(), null, 'script'); return false;"} Save Requirement

Answer 1

更改此原始代码：

jQuery(document).ready(function() {
  jQuery(".submit-with-ajax").submitWithAjax();
}

到此：

jQuery(document).ready(function() {
  jQuery(".submit-with-ajax").live('submit', submitWithAjax);
}

和原始代码：

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    jQuery.post(this.action, jQuery(this).serialize(), null, "script");
    return false;
  })
  return this;
};

到此：

jQuery.fn.submitWithAjax = function() {
    jQuery.post(this.action, jQuery(this).serialize(), null, "script");
    return false;
};

jQuery .live（）调用将命名处理程序绑定到与给定选择器匹配的所有当前和未来元素上的命名事件，包括通过ajax加载的元素。希望这能满足您的需求。

有关.live（）函数的文档，请参阅以下内容：http://api.jquery.com/live/

Answer 2

这是我最终在基于Ender输入的代码中更改的内容。我用他的代码版本找到'submitWithAjax'时出错了，但他指出了我正确的方向，在阅读了.live文档后，我提出了这个有用的方法：

的application.js

jQuery(document).ready(function() {

  # Just put it all in one place
  jQuery(".submit-with-ajax").live('submit', function() {
        jQuery.post(this.action, jQuery(this).serialize(), null, "script");
        return false;
      });
...
}

sale_case /显示/ _requirments_new.html.haml：

# Change the button back to unobtrusive
%button{ :type => "submit"} Save Requirement

谢谢！

如何（重新）绑定到.load（ed）表单上的提交按钮/表单

2 个答案: