JQuery не добавляет HTML-форму

0

Итак, опять же, я новичок в 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>
  • 0
    Вы слушаете событие отправки формы, а кнопка не находится внутри этой формы, так как это должно работать?
Теги:

3 ответа

3
Лучший ответ

Вместо обработчика событий отправки вам нужно использовать обработчик события click - отправить событие для элемента формы, вы регистрируете обработчик элемента кнопки.

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

Демо: скрипка

Поделиться
  • 0
    Не могли бы вы очень кратко объяснить разницу между ними? Или укажи мне на то, что могло бы помочь. Я думаю, что «клик» довольно понятен, но что делает «представить» другим
  • 0
    Только событие @sreya submit можно использовать для HTMLFormElement, а не для button
Показать ещё 5 комментариев
1

Попробуй это:

$('#add').on('click', function(e) // <-- click instead of submit
    {
        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); // no need to wrapping with jQuery
    });
Поделиться
0

Обработчик события клика неверен.

submit событие посылается к элементу, когда пользователь пытается отправить форму. Он может быть присоединен только к элементам form.

Изменить это

 $('#add').on('submit',function(e)

чтобы:

$('#add').on('click',function(e)
Поделиться
  • 0
    Ба, Идк, который ответил первым

Ещё вопросы

Сообщество Overcoder
Наверх
Меню