如何（重新）綁定提交按鈕/形式上。（編輯）形式

Question

在早期學習如何實現不顯眼的js（使用Rails & jQuery）我遇到了如何（重新）綁定在加載（加載）包含表單的新內容後提交按鈕/表單。

我已經設置了「創建新項目」的形式，在項目的連城的頂部顯示（當用戶點擊一個按鈕創建）

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函數。如何在加載內容時如何做到這一點？

我最終不得不在部分（突兀）做到這一點，爲了讓它工作，但它讓我不知道這一點。 ：

%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

這裏是我結束了在基於安德的輸入代碼改變。我得到一個錯誤與發現「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  

謝謝！