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

我没有足够的声誉来为你的

添加评论

“你能举例说明我的jQuery吗？$（'document'）。on（'submit'，'form'，function（event）{alert（”hello）;}）;没有任何事情发生。“但是，

确保您的代码包含在

中

$(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
    });

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

3 个答案: