jQuery 脚本似乎不适用于使用 XMLHttpRequest 显示的表单答案

【问题标题】：jQuery script doesn't seem to work with form displayed with XMLHttpRequestjQuery 脚本似乎不适用于使用 XMLHttpRequest 显示的表单
【发布时间】：2017-01-05 18:47:45
【问题描述】：

我有一个小型应用程序，我首先设置了几个设置，并基于此显示带有 XMLHttpRequest 的 form。我的问题是其中一个 jQuery 脚本似乎不适用于 form （脚本是通过按下按钮触发的）。如果我以完全相同的形式显示标准方式，则所有脚本都可以正常工作。控制台中没有显示错误。我很困。我确实在许多其他项目上使用了类似的技术，只是找不到问题所在。

一些简化的代码：

<div id="vans-form-button">
        <input type="button" data-id='1' name='vans-book-btn' id='vans-book-btn' value="NEXT STEP"/>
</div>

<div id="vans-booking-form"></div>

jQuery:

$(document).ready(function(){

    $("#vans-book-btn").click(function (event) {
        event.preventDefault();

        var elem = $(this), vanid = elem.attr('data-id'); 

        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("vans-booking-form").innerHTML = xmlhttp.responseText;
            }
        };        
        console.log("manid:" + id);
        console.log("vanid:" + vanid);
        xmlhttp.open("GET","testform.php?vansize="+vanid+"&manpower="+id,true);
        xmlhttp.send();

    });

});

所以现在我已经显示了表单，并且一些 jquery 验证脚本可以正常工作。在我看来，JQuery 没有找到提交按钮。

HTML：

<form>
    <input type="submit" name='submit-vans-quote' id="submit-vans-quote" value="SUBMIT" />
</form>

JQuery:

$(document).ready(function(){

$("#submit-vans-quote").click(function (event) {
 event.preventDefault();
 alert("button was clicked");
....
....
....
    });
});

jQuery 和所有其他脚本都放在页面的末尾。但我也尝试将脚本放在页面顶部。

希望我能正确解释自己。提前非常感谢您

【问题讨论】：

你能为此创建一个 jsfiddle 吗？也许这有助于找出问题所在。

标签： jquery html xmlhttprequest

【解决方案1】：

我解决了这个问题。我不得不改变：

$(document).ready(function(){
 $("#submit-vans-quote").click(function (event) {
   event.preventDefault();
   alert("button was clicked");
   ....
   ....
 });

});

到：

$(document).on('click', '#submit-vans-quote', function(e) {
    e.preventDefault();
    alert("button was clicked");
    ....
    ....
});

这样就成功了！

【讨论】：