jquery - 动态添加内容的事件绑定(bind)遇到问题

Question

我有一个简单的表单，可以添加关键字，这些关键字有删除按钮，都是 POST 请求，通过 ajax 完成。删除对非动态关键字的请求通过 ajax 工作，但动态添加的关键字回退到 HTTP 请求。我阅读了周围的内容，并将问题范围缩小到了事件绑定(bind)。

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(); 的更好方法，请告诉我。

编辑:

问题是，当我通过 ajax 添加新关键字时，它们上的删除按钮会退回到 HTTP 请求，而不是通过 ajax 提交。

Answer 1

感谢 this 成功解决了这个问题和 this 。基本上它在 div.edit_list:last(即新添加的关键字)上调用 setupNew 并在其上设置 .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 函数，它接受输入并为现有关键字以及添加新关键字时调用该函数？)，但它截至目前为止。感谢大家的帮助。