所以，再说一次，我是 JQuery 的新手，但无论出于何种原因，当我单击“添加场景”按钮时，JQuery 都没有附加表单。它甚至没有到达涉及#add 的函数。我在 .on() 行上设置了一个断点，当我单击时它似乎无法识别它。
$(document).ready(function ()
{
$('#add').on('submit',function(e)
{
var form = "<div class='form'>\
<h3> Scenario </h3>\
<form id='scenario'>\
<div>Name: <input type='text' name='ScenarioName'> </div>\
<div>Rate of Investment Return (While Working): <input type='number' name='Working'></div>\
<div>Rate of Investment Return (Retired): <input type='number' name='Retired'></div>\
<div>Desired Retirement Yearly Income: <input type='number' name='desiredInc'></div>\
<div><input type='submit' value='Submit'></div>\
</form>\
<div><button id='add' type='submit'>Add Scenario </button></div>\
</div>"
$('body').append($(form));
e.preventDefault();
});
});
<body>
<div class='form'>
<h3> Basic Information </h3>
<form id='basic'>
<div>Year of Birth: <input type='number' name='YOB'> </div>
<div>Current Savings: <input type='number' name='CurrSav'>
</div>
<div>Expected Retirement Age: <input type='number' name='RetAge'></div>
<div>Life expectancy: <input type='number' name='LifeExp'>
</div>
<div><input type='submit' value='Submit'></div>
</form>
</div>
<div class='form'>
<h3> Scenario </h3>
<form id='scenario'>
<div>Name: <input type='text' name='ScenarioName'> </div>
<div>Rate of Investment Return (While Working): <input type='number' name='Working'></div>
<div>Rate of Investment Return (Retired): <input type='number' name='Retired'></div>
<div>Desired Retirement Yearly Income: <input type='number' name='desiredInc'></div>
<div><input type='submit' value='Submit'></div>
</form>
<div><button id='add' type='submit'>Add Scenario </button></div>
</div>
</body>
最佳答案
而不是 submit event您需要使用 click event 处理程序handler - 提交事件适用于表单元素，您正在为按钮元素注册处理程序。
$(document).ready(function () {
$('#add').on('click', function (e) {
var form = "<div class='form'>\
<h3> Scenario </h3>\
<form id='scenario'>\
<div>Name: <input type='text' name='ScenarioName'> </div>\
<div>Rate of Investment Return (While Working): <input type='number' name='Working'></div>\
<div>Rate of Investment Return (Retired): <input type='number' name='Retired'></div>\
<div>Desired Retirement Yearly Income: <input type='number' name='desiredInc'></div>\
<div><input type='submit' value='Submit'></div>\
</form>\
</div>";
$(this).parent().before(form)
e.preventDefault();
});
});
演示:
$(document).ready(function() {
$('#add').on('click', function(e) {
var form = "<div class='form'>\
<h3> Scenario </h3>\
<form id='scenario'>\
<div>Name: <input type='text' name='ScenarioName'> </div>\
<div>Rate of Investment Return (While Working): <input type='number' name='Working'></div>\
<div>Rate of Investment Return (Retired): <input type='number' name='Retired'></div>\
<div>Desired Retirement Yearly Income: <input type='number' name='desiredInc'></div>\
<div><input type='submit' value='Submit'></div>\
</form>\
</div>";
$(this).parent().before(form)
e.preventDefault();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
<h3> Basic Information </h3>
<form id='basic'>
<div>Year of Birth:
<input type='number' name='YOB' />
</div>
<div>Current Savings:
<input type='number' name='CurrSav' />
</div>
<div>Expected Retirement Age:
<input type='number' name='RetAge' />
</div>
<div>Life expectancy:
<input type='number' name='LifeExp' />
</div>
<div>
<input type='submit' value='Submit' />
</div>
</form>
</div>
<div class='form'>
<h3> Scenario </h3>
<form id='scenario'>
<div>Name:
<input type='text' name='ScenarioName' />
</div>
<div>Rate of Investment Return (While Working):
<input type='number' name='Working' />
</div>
<div>Rate of Investment Return (Retired):
<input type='number' name='Retired' />
</div>
<div>Desired Retirement Yearly Income:
<input type='number' name='desiredInc' />
</div>
<div>
<input type='submit' value='Submit' />
</div>
</form>
<div>
<button id='add' type='submit'>Add Scenario</button>
</div>
</div>关于javascript - JQuery 不附加 html 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19133415/