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

Question

我有一个简单的网页，它从数据库中获取项目列表并将它们呈现为可以由用户更新的表单。我正在尝试获取提交事件并使用 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
    })
  })

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

Answer 1

将侦听器附加到文档

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

Answer 2

我的声誉不够高，无法对您的

添加评论

"Can you give me an example with my jQuery? $('document').on('submit', 'form', function(event){alert("你好);});什么也没有发生。”但是，

确保代码被

包围

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

Answer 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
    });

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

attach an event to dynamically created forms

javascript

forms

ajax

jquery

dynamic