动态插入的表单和Jquery提交

Dynamically inserted form and Jquery submit

本文关键字：Jquery 提交 表单 插入 动态      更新时间：2023-09-26

我有一个可以动态插入的表单。当一个链接被点击时，我执行这个jQuery:

var newhtml = ' <div class="nav-wrapper"> <form id="target"> <div class="input-field"><input id="search" type="search" required> <label for="search"><i class="material-icons">search</i></label><i class="material-icons">close</i></div></form></div> ';
        //replace nav bar with search bar
        $("#replaceBar").replaceWith(newhtml);

我的javascript文件中也有这个：

$("#target").submit(function (event) {
        alert("search submitted");
    });

我的问题是，我认为提交的jquery没有被附加，因为表单是在JS加载后提交的。

我最终希望表单转到一个新的html页面，其中包含表单中的数据。

我认为问题在于您没有提交按钮。使用您的演示代码，如果我在输入字段中点击回车键，我会看到警报。

试试这个：

$(document).ready(function() {
  var newhtml = '<div class="nav-wrapper"> <form id="target"> <div class="input-field"><input id="search" type="search" required><input type="submit" value="search"></div></form></div>';
  //replace nav bar with search bar
  $("#replaceBar").replaceWith(newhtml);
  $("#target").on('submit', function (event) {
    alert("search submitted");
  });
});

我的代码是正确的，我只是将提交时事件绑定到了另一个函数中。我需要它在插入之后。

现在它工作得很好。

动态插入的元素需要使用$((.on((；如果您不知道是什么，请在Jquery API中搜索它。在插入事件目标元素id之前的提交事件绑定，那么脚本就不能像您预期的那样工作。

尝试使用文档的事件处理程序：

$(function(){
  $(document).on('submit',function(e) {
    e.stopPropagation();
    if('target' === e.target.id) {
      //to do here
    }
  });
});
相关文章：