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();而不循环，请告诉我。

编辑：

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

Answer 1

通过this和this进行管理以解决问题。基本上它在div.edit_list上调用setupNew：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/）就是你想要的。它将使用选择器将事件侦听器绑定到所有当前和未来元素。

动态添加内容的事件绑定有问题

2 个答案: