使用ajax表单提交加载div区域？答案

【问题标题】：Loading div region with ajax form submit?使用ajax表单提交加载div区域？
【发布时间】：2023-04-04 23:50:01
【问题描述】：

我不知道我是否以正确的方式处理这个问题。我有一个显示一些信息的主页。然后，您可以单击一个按钮，然后页面将通过从单独的文件加载表单来显示一个表单：

    $('#viewport').load('/views/myView.php #targetDiv')

这很好用。但这种观点是一种形式。然后我想用 Ajax 提交包含的表单。但我似乎做不到。我认为这是因为如果我为表单设置了一个按钮处理程序，它就不起作用，因为在加载主页和 JQuery 脚本时表单不存在。

为了清楚起见，我正在使用 JQuery 和 Ajax 加载将此 div 加载到我的主页上。然后，我也想简单地使用 Ajax 提交此表单。

<div id="targetDiv">
<div class="title">Submit News</div>
    <form role="form" id="submitMyForm">

        <div class="form-group">
            <label for="myInput">Input here</label>
            <input type="text" class="form-control" id="myInput">
        </div>

        <button type="button" id="subMyFormBtn" class="btn btn-default">Submit</button>    
    </form>        
</div>

TIA

完整解决方案：

$('#viewport').load('/views/myView.php #targetDiv');
$("#targetDiv").live("submit",function(e){
    e.preventDefault();
    //ajax here
});

【问题讨论】：

如果您想在没有 JS 的情况下提交，请将按钮类型更改为提交
您正在寻找.live() 版本的.on()。它允许您绑定到 dom 上尚不存在的元素。或者，在您的.load() 中，您可以传递一个函数以在完成加载时运行，然后您可以在其中将事件绑定到表单。

标签： javascript php jquery html ajax

【解决方案1】：

你必须这样做：

$("#subMyFormBtn").live("submit",function(

$("#submitMyForm").submit();

));

【讨论】：

【解决方案2】：

你可以做类似的事情

 $('#viewport')
     .load('/views/myView.php #targetDiv')
     .done(function () {
         $('#yourform').submit(function (e) {
             $.ajax(..)
             e.preventDefault()
         });
     });

或

$('body').on('submit', '#yourform', function (e) {
    $.ajax(..)
    e.preventDefault()
});

【讨论】：