Сценарий jQuery, похоже, не работает с формой, отображаемой с XMLHttpRequest

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

и что сделал трюк!