个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 12:27:42 25 4
gpt4 key购买 nike

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

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

最佳答案

将监听器附加到文档

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

关于javascript - 将事件附加到动态创建的表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28775678/

25 4 0
文章推荐： c# - 如何并行运行 MSpec 测试程序集？
文章推荐： javascript - 在 Firefox 上的滚动事件上移动元素
文章推荐： javascript - 在 div 中获取一个 span innerHTML
文章推荐： c# - 快速替换文件中的行首
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com