Возникли проблемы с привязкой событий для динамически добавляемых материалов

Question

У меня есть простая форма, которая добавляет ключевые слова, и у этих ключевых слов есть кнопка удаления, оба запроса POST, выполняемые через ajax. запрос на удаление для не динамических ключевых слов работает через ajax, но динамически добавляются резервные к HTTP-запросу. Я прочитал, и проблема сузилась до привязки событий.

var app = {
setupKeywordDeleteForm: function () {
  // Was using regex plugin to find form which had ids like list_1, list_2 etc
  // $("form:regex(id, list_*)").each ( function () {
  $('li').each ( function () {
    var $form = $(this);
    $form.submit(function(e) {
      e.preventDefault();
      $.post($form.attr('action'), $form.serialize(), function() {
      }, "script");
    });
  })
},

setupKeywordAddForm: function () {
  var $form = $('#add_keywords');
  $form.bind('submit', (function(e) {
    e.preventDefault();
    $.post($form.attr('action'), $form.serialize(), function() {
    }, "script");
  }));
},
}

  jQuery(function () {
    app.setupKeywordAddForm();
    app.setupKeywordDeleteForm();
  });

Я читал learningjquery и возился с плагином livequery, но безрезультатно. Я понимаю проблему, просто не могу ее решить. Любая помощь приветствуется. Также, если вы знаете лучший способ определения setupKeywordDeleteForm(); без циклов, пожалуйста, дайте мне знать.

Edit:

Проблема в том, что когда я добавляю новые ключевые слова через ajax, кнопка удаления на них возвращается к HTTP-запросу вместо отправки через ajax.

Answer 1

удалось решить благодаря этому и этому .По сути, он вызывает setupNew для div.edit_list: last, т. Е. Только что добавленное ключевое слово и устанавливает для него .post ().

var app = {
setupNew: function () {
  var $form = $('.edit_list:last');
  $($form).submit(function(e) {
      e.preventDefault();
      $.post($form.attr('action'), $form.serialize(), function() {
      }, "script");
    });
},

setupKeywordAddForm: function () {
  var $form = $('#add_keywords');
  $form.submit(function(e) {
    e.preventDefault();
    $.post($form.attr('action'), $form.serialize(), function() {
      app.setupNew();
    }, "script");
  });
}
}

Да, это немного некрасиво, и мне, вероятно, следует высушить это (Я предполагаю, что я должен создать общую функцию addKeyword, которая принимает входные данные и вызывает эту функцию для существующих ключевых слов и когда добавляется новое ключевое слово?), Но она работает на данный момент.Спасибо всем за вашу помощь.

Answer 2

Я не совсем уверен, в чем вопрос, но я думаю, что $(selector).live() (http://api.jquery.com/live/) - это то, что вы хотите. Он связывает прослушиватель событий со всеми текущими и будущими элементами с помощью селектора.