插入元素后如何让 jquery 将行为附加到元素

我有一个通过 ajax 提交的表单，并返回一个更新的 html 块，其中包含我想通过 jquery 提交的更新表单。

我遇到的问题是，第一次单击“提交”时，事件被 jquery 捕获并且效果很好。当我对表单进行另一次更改而不刷新时，jquery 不会捕获该事件，而是发出标准的 post 请求。

插入元素后如何让 jquery 将行为附加到元素。

这是我的 jquery 代码。

$('.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;
 });

这是我返回的（精简的）HTML。

<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>

您需要重新附加您定义的提交事件处理程序，因为您要替换表单。您可以将整个事情设为可调用函数，以便可以多次调用它。

据我所知，live不适合submit- 您也许可以附上click事件处理程序与live但这不是exact与.submit。我只想定义一个像这样的函数：

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')

如果觉得懒的话可以附上.live('click', function() {} );到您的提交按钮，但如果没有单击就提交了，它将无法工作，因此它有其缺点。

$('.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;
 });

您也许还可以使用liveQuery但我从来没有真正使用过它。