JQuery not appending html form

Итак, снова я новичок в JQuery, но по какой-либо причине JQuery не добавляет форму, когда я нажимаю кнопку «Добавить сценарий». Он даже не подходит к функции с #add. У меня есть точка останова на строке .on(), и она, похоже, не распознает ее, когда я нажимаю.JQuery not appending html form

$(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>

источник

2013-10-02 sreya

Вы слушаете за представить события формы, а кнопка не внутри, что формы, так как это должно работать? – adeneo

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

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

Демо: Fiddle

источник

2013-10-02 09:05:05

Не могли бы вы, вкратце, объяснить разницу между ними. Или назовите меня чем-то, что поможет. Я думаю, что «щелчок» довольно понятен, но что делает «submit» другим – sreya

событие @sreya 'submit' можно использовать только для ** HTMLFormElement **, а не для' кнопки' –

Событие отправки не инициируется элементом ввода , это элемент формы, когда он отправляется ... когда вы нажимаете кнопку отправки, она внутренне запускает отправку формы, что приведет к тому, что событие отправки вызовет –

Ваш обработчик события щелчка мышью неправильно.

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

Изменить этот

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

к:

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

источник

2013-10-02 09:07:39

bah, idk, который ответил первым – sreya

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

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

источник

2013-10-02 09:11:19

JQuery not appending html form

ответ

Смежные вопросы