我有我通过AJAX提交表单，并返回HTML的最新块，也包括我要提交通过jQuery的一个更新的形式。

我遇到的问题是，我第一次点击提交该事件的jQuery捕获和伟大工程。当我再作更改而无需刷新的形式，该事件不是由jQuery的俘虏，但使一个标准的post请求。

我怎么能有jQuery的将它插入后附加行为的元素。

下面是我的jQuery code。

  $（'。edit_clothing_product）。递交（函数（）{
  VAR productDiv = $（本）.parent（）;
  变种行动= $（本）.attr（行动）;
  VAR FORMDATA = $（本）.serialize（）;

  $。员额（动作，FORMDATA，功能（数据）{
  productDiv.replaceWith（数据）;
  }）;
  返回false;
 }）;
 

下面是（下调）HTML，我回来。

 ＆LT; D​​IV CLASS =产品＆GT;
    ＆LT;形式的行动=...级=edit_clothing_product＆GT;
      ＆LT; D​​IV CLASS =color_combos＆GT;
        ... {表单域}
      ＆LT; / DIV＆GT;
      ＆LT; A HREF =... / add_color_combo级=add_color_combo＆gt;添加颜色组合和LT; / A＆GT;
    ＆LT;输入名称=提交类型=提交值=保存/＆GT;
  ＆LT; /形式GT;
＆LT; / DIV＆GT;
 

解决方案

您将需要你定义的，因为你要替换的形式重新连接提交事件处理程序。你可以让这整个事情可调用的函数，所以你可以调用它多次。

据我所知，生活为不起作用提交 - 你也许可以附加一个点击事件处理生活，但它不是的确切的同样的事情， .submit 。我只想定义像这样一个功能：

 函数handleForm（EL）{
$（EL）.submit（函数（）{
  变种productDiv = $（EL）.parent（）;
  变种行动= $（EL）.attr（行动）;
  VAR FORMDATA = $（EL）.serialize（）;

  $。员额（动作，FORMDATA，功能（数据）{
      productDiv.replaceWith（数据）;
      VAR形式= data.find（形式）;
      handleForm（表）;
  }）;
  返回false;
 }）;
}

handleForm（'。edit_clothing_product）
 

如果你觉得懒惰，附加 .live（'点击'，函数（）{}）; 您的提交按钮，但如果它被提交没有点击它不会工作，所以它有它的缺点。

  $（'。edit_clothing_product #submitButton）。生活（点击，函数（）{
  变种形式= $（本）.closest（形式）;
  变种productDiv = form.parent（）;
  变种行动= $（形式）.attr（行动）;
  VAR FORMDATA = $（形式）.serialize（）;

  $。员额（动作，FORMDATA，功能（数据）{
      productDiv.replaceWith（数据）;
  }）;
  返回false;
 }）;
 

您可能还可以使用的liveQuery ，但我从来没有真正使用了。

I have a form that I submit through ajax, and returns an updated chunk of html that includes an updated form that I want to submit through jquery.

The problem I am having is that the first time I click submit the event is captured by jquery and works great. When I make another change to the form without refreshing, the event is not captured by jquery, but makes a standard post request.

How can I have jquery attach behavior to an element after inserting it.

Here is my jquery code.

$('.edit_clothing_product').submit(function(){
  var productDiv = $(this).parent();
  var action = $(this).attr('action');
  var formData = $(this).serialize();

  $.post(action, formData, function(data){
  productDiv.replaceWith(data);
  });
  return false;
 });

Here is the (trimmed down) HTML that I return.

<div class="product">
    <form action="..." class="edit_clothing_product">
      <div class="color_combos">
        ...{form fields}
      </div>
      <a href=".../add_color_combo" class="add_color_combo">Add Color Combo</a>
    <input name="commit" type="submit" value="Save" />
  </form>
</div>

You'll need to re-attach the submit event handler you defined because you are replacing the form. You can make this entire thing a callable function so you can invoke it multiple times.

As far as I know, live doesn't work for submit - you might be able to attach a click event handler with live but it's not the exact same thing as .submit. I would just define a function like so:

function handleForm( el ) {
$(el).submit(function(){
  var productDiv = $(el).parent();
  var action = $(el).attr('action');
  var formData = $(el).serialize();

  $.post(action, formData, function(data){
      productDiv.replaceWith(data);
      var form = data.find('form');
      handleForm( form );
  });
  return false;
 });
}

handleForm('.edit_clothing_product')

If you feel lazy, attach .live('click', function() {} ); to your submit button but if it gets submitted without a click it wont work so it has its drawbacks.

$('.edit_clothing_product #submitButton').live('click', function(){
  var form = $(this).closest('form');
  var productDiv = form.parent();
  var action = $(form).attr('action');
  var formData = $(form).serialize();

  $.post(action, formData, function(data){
      productDiv.replaceWith(data);
  });
  return false;
 });

You might also be able to use liveQuery but I never really used that.