Как я могу иметь jquery прикрепить поведение к элементу после вставки его

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, но это не точно то же самое как .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

Медер указал мне правильное направление, спасибо!

Одна вещь, которую я забыл упомянуть, это то, что у меня было несколько элементов продукта на странице, что означало, что мне пришлось вызывать функцию для каждого.

Кроме того, мне не удалось повторно прикрепить событие отправки непосредственно к форме, которую я только что вставил, но мне удалось повторно присоединить все формы продукта. Это работает, но кажется немного неуклюжим, дайте мне знать, если я не должен делать это таким образом.

Вот последний 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);
});