jQuery - 使用 AJAX 动态加载表单并提交答案

【问题标题】：jQuery - Dynamically Load Form and Submit with AJAXjQuery - 使用 AJAX 动态加载表单并提交
【发布时间】：2018-07-02 09:12:21
【问题描述】：

我正在尝试使用.load(url) 将表单加载到对话框中，然后在其上启用 AJAX 提交。它确实将表单加载到对话框中，但它似乎完全忽略了我的 jQuery 代码，只是在页面刷新时正常提交。

我在多个站点（非动态）上使用 AJAX 代码，并且按预期工作。

这里我给你看代码：

javascript.js;包装成一个 ready() 来提交动态表单

$("#dbsearch").submit(function(event) {
    alert('click!');
    var data = $("#dbsearch").serialize();
    $.ajax({
        url: 'ajax.php',
        type: 'POST',
            data: data,
            success: function(response) {
                alert(response);
            }
    });

    event.preventDefault();
});

form.php;加载到模态中

<form method="post" id="dbsearch">
    <div class="form-group col-xs-12 col-md-12">
        <label for="method" class="control-label">Search By</label>
        <select class="form-control" id="method" name="method">
            <option>Choose...</option>
            <option value="content-type">Search By Name</option>
            <option value="release-date">Search By Release Date</option>
        </select>
    </div>
    <div class="form-group col-xs-12 col-md-12">
        <label for="value" class="control-label">Value</label>
        <input type="text" value="" class="form-control" id="value" placeholder="Enter a term...">
    </div>
    <div class="form-group col-xs-12 col-md-12">
        <input type="submit" value="Search" class="btn btn-primary btn-block">
    </div>
</form>

这可能是什么原因造成的？是因为它是动态加载到对话框中的吗？如果是这样，解决此类问题的最佳方法是什么？

更新的 JS 代码

$("#dbsearch").delegate("#dbsearch input[type=submit]", "click", function(event) {
    alert('click!');
    var data = $("#dbsearch").serialize();
    $.ajax({
        url: 'ajax.php',
        type: 'POST',
            data: data,
            success: function(response) {
                alert(response);
            }
    });

    event.preventDefault();
});

【问题讨论】：

标签： jquery ajax

【解决方案1】：

发生这种情况是因为您使用的是直接事件处理程序而不是委托事件处理程序。事件委托允许我们将事件侦听器附加到现在或将来存在的元素。

https://learn.jquery.com/events/event-delegation/

示例（未测试）：

$("#dbsearch").delegate("#dbsearch input[type=submit]", "click", function(event) {
  // Your code here
  event.preventDefault();
});

【讨论】：

嗨史蒂夫，感谢您对我的问题的意见。可悲的是，这似乎不起作用。我查看了文档，但在尝试了一些示例之后，它似乎仍然像普通表单一样提交。
在您的示例代码中，您的 JS 中的警报是否触发了？
很遗憾没有触发警报
您能否使用委托来触发警报？这是第一个要解决的问题，然后需要防止表单的默认提交。
我尝试了多种方法，从将“点击”更改为“提交”，还删除了 [type=submit] 以查看它是否会在任何输入上触发，但不幸的是我从 jquery 得到零响应。为了确保缓存不是问题，我每次测试时都使用 CTRL+F5 重新加载页面。

【解决方案2】：

您可以使用“html”方法将代码加载到对话框容器元素中，它将在浏览器上加载您的js函数。

$.get(url, function(result){
   $('mydialogdiv').html(result);
});

【讨论】：