jQuery腳本似乎無法與XMLHttpRequest一起顯示錶單使用

我有一個小應用程序，我先設置了幾個設置，並基於此我使用XMLHttpRequest顯示表單。我的問題是，其中一個jQuery腳本似乎不能與形式（腳本通過按下按鈕觸發）。如果我有完全相同的窗體顯示標準方式，所有腳本都可以正常工作。在控制檯中沒有顯示錯誤。我很困難。我在其他許多項目中使用了類似的技術，只是無法找到問題所在。jQuery腳本似乎無法與XMLHttpRequest一起顯示錶單使用

一些簡化的代碼：

<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和其他所有腳本就在頁的末尾放置。但我也嘗試將腳本放置在頁面頂部。

希望我給自己適當的補貼。非常感謝您提前

來源

2017-01-05 Nita

你能爲此創建一個jsfiddle嗎？也許這將有助於找出問題所在。 –

我解決了這個問題。我不得不改變：

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

而且奏效了！

來源

2017-01-05 10:47:45 Nita

jQuery腳本似乎無法與XMLHttpRequest一起顯示錶單使用

回答

相關問題