У меня есть форма (#waldform), которую я хочу показывать только после отправки предыдущей формы (#modelform). Оба типа #modelform и #waldform вызывают функции python. Если я включаю #waldform непосредственно в html файл, все работает нормально и вызывается функция python. Однако, если я создаю его только после отправки #modelform, используя jquery, как и в моем коде ниже, функция python не вызывается, а URL-адрес сайта изменяется на # в конце.
Вот jquery. Элемент формы добавляется в первую функцию.
$(document).ready(function() {
//call estimate python function
$(function() {
$("#modelform").submit(function() {
// post the form values via AJAX...
$.post('/estimate', {name: $("#mymodel").val()}, function(data) {
var $a_var = data['title']
var $element = $('<div class="item">' + $a_var + '</div><br>');
$('body').append($element) ;
//FORM ADDED HERE
$('body').append('<form id="waldform" action="#" method="post"><input type="text" id="waldnum" /><input type="submit" value="Wald Test" /></form>');
});
return false ;
});
});
//call wald python function
$(function() {
$("#waldform").submit(function() {
//post the form values via AJAX...
$.post('/wald', {name: $("#waldnum").val()}, function(data) {
var $a_var = data['title']
var $element = $('<div class="item">' + $a_var + '</div><br>');
$('body').append($element) ;
});
return false ;
});
});
});
Вот html, если необходимо. Если я включаю #waldform непосредственно в этот html-код, тогда функция python вызывается правильно.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="static/jquery-1.4.2.js"></script>
<script type="text/javascript" src="static/jquery-ui-1.8.4.custom.min.js"></script>
<script type='text/javascript' src='static/js_test.js'></script>
<script type='text/javascript' src='static/jquery.form.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<form id="dataform" action="submit" method="post" enctype="multipart/form-data">
<input type="file" name="myfile" id="myFile"/>
<input type="submit" value="Submit File"/>
</form>
<form id="modelform" action="#" method="post">
<input type="text" id="mymodel" />
<input type="submit" value="Estimate" />
</form>
</body>
</html>
Вы привязываетесь к событию отправки 2-й формы до того, как существует 2-я форма. Переместите его после добавления.
//FORM ADDED HERE
$('body').append('<form id="waldform" action="#" method="post"><input type="text" id="waldnum" /><input type="submit" value="Wald Test" /></form>');
//BIND EVENT HERE
$("#waldform").submit(function() {
$("#waldform")
, он выбирает только те элементы, которые существуют в этот момент времени. Будущие элементы не будут затронуты этим. обновил ответ немного.
Вам необходимо делегировать его с помощью.on()
$(document).on('submit', '#waldform', function(e) {
alert('clicked');
e.preventDefault();
});
$(function() {})
в вашем коде являются избыточными.