Question

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

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

如何在插入元素后对元素进行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>

Answer 1

您需要重新附加您定义的提交事件处理程序，因为您要替换表单。你可以把这整个东西变成一个可调用的函数，这样你就可以多次调用它。

据我所知，live不适用于submit - 您可能可以使用click附加live事件处理程序，但它不是< em>完全与.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，但我从未真正使用过它。

Answer 2

Meder指出我正确的方向，谢谢！

我忘记提到的一件事是我在页面上有多个产品div，这意味着我必须为每个产品调用该函数。

另外，我无法将提交事件直接重新附加到我刚刚插入的表单中，但我能够重新附加到所有产品表单。它有效，但看起来有点笨拙，让我知道我是不是应该这样做。

这是最终的jquery

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)
      $('.edit_clothing_product').each(function(){
        handleForm(this);
    });
  });
  return false;
 });
}

$('.edit_clothing_product').each(function(){
    handleForm(this);
});

如何在插入元素后对元素进行jquery附加行为

2 个答案: