Question

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

一些简化代码：

<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和所有其他脚本都放在页面的末尾。但我也尝试将脚本放在页面顶部。

希望我能正确地表达自己。非常感谢您提前

Answer 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");
    ....
    ....
});

这就是诀窍！

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

1 个答案: