Как (повторно) связать, чтобы отправить кнопку / форму в форме .load (ed)

Question

В начале обучения тому, как реализовать ненавязчивые js (используя Rails & 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

Вот что я в итоге изменил в коде на основе ввода Эндера. Я получил ошибку при поиске '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    

Спасибо!

Answer 2

Изменить этот оригинальный код:

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/