将事件附加到动态创建的表单答案

【问题标题】：attach an event to dynamically created forms将事件附加到动态创建的表单
【发布时间】：2015-02-27 22:49:13
【问题描述】：

我有一个简单的网页，它从数据库中获取项目列表并将它们呈现为可由用户更新的表单。我正在尝试获取提交事件并使用 ajax 更新表单。我不知道如何让我的 jQuery 函数知道我新创建的表单。这是我的 HTML：

<body>
  <ul class="flight-list">
    <li>
      <form>form stuff</form>
    </li>
    <li>
      <form>form stuff</form>
    </li>
    <li>
      <form>form stuff</form>
    </li>
    <li>
      <form>form stuff</form>
    </li>
    ... etc
 </ul>
 <form>Form to add new records</form>

创建新记录的表单完全符合预期，并且不是动态创建的。

这里是 jQuery：

创建表单：

$('form').on('submit', function(event){
    event.preventDefault();
    var form = $(this);
    var flightData = form.serialize();

    $.ajax({
        type: 'POST', url: '/flights', data: flightData
      }).done(function(data){
        var i = data.length - 1;
        var flight = data[i];
        addFlightsForm([flight]);
        form.trigger('reset');
    });
  });

更新表格：

$('form').on('submit', function(event){
    event.preventDefault();
    var form = $(this);
    var flightData = form.serialize();

    $.ajax({
      type: 'PUT', url: '/flights/27', data: flightData
    }).done(function(data){
      // update specific form with new value
    })
  })

我知道有一些方法可以将事件附加到动态创建的元素，但我不知道该怎么做。

【问题讨论】：

您正在寻找的是委托事件处理。 stackoverflow.com/questions/18414695/…

标签： javascript jquery ajax forms dynamic

【解决方案1】：

将监听器附加到文档

$(document).on('submit', 'form', yourHandler);

【讨论】：

你能给我一个关于我的 jQuery 的例子吗？ $('document').on('submit', 'form', function(event){alert("hello);}); 什么都没有发生。

【解决方案2】：

我没有足够高的声望给你的评论添加评论

"你能给我举个我的 jQuery 的例子吗？$('document').on('submit', 'form', function(event){alert("hello);});什么都没有发生。”但是，

确保你的代码被

包围

$(document).ready(function () {
//your code
});

【讨论】：

我已经完成了，但我仍然无法显示任何内容。这是实际文件：github.com/arelenglish/logbook-web/blob/master/client/public/…
您作为对我的问题的评论发布的链接完美地解释了我做错了什么。谢谢！
在您的初始 html 代码中，您在这里缺少一个结束引号 (")：

【解决方案3】：

看看LiveQuery

LiveQuery

这是一个 getaway-package，它将事件处理程序附加到元素发生的事件上，无论它们是动态生成的还是已经存在的。

var $mylist = $('#mylist');
$mylist.livequery(
    '.element', // the selector to match against
    function(elem) { // a matched function
        // this = elem = the li element just added to the DOM
    }, function(elem) { // an unmatched/expire function
        // this = elem = the li element just removed from the DOM
    });

【讨论】：