Отправка второй формы в div с обновленными данными

Question

После отправки формы данные публикуются на вызов ajax в jquery. Данные в форме обновляются с другим типом ввода и новой кнопкой отправки.

Первая HTML-форма:

<form id="firstform">
<textarea id="firsttext"></textarea>
<input type="submit" id="firstsubmitbutton" value="send">
</form>

Сообщения в этом jquery:

$('#firstsubmitbutton').click(function(event){
event.preventDefault();
var cpm = $.trim($("#firsttext").val());
$.ajax({
type: "POST",
url: "result.php",
data:{ myvar: cpm }, 
success: function(data){
    $('#firstform').fadeOut('slow', function() {
       html(data).fadeIn('slow');
    });
}
});

В result.php загружаются новые данные для замены типов ввода:

echo "<input type='text' id='secondformvalue'>";
echo "<input type='submit' id='submitsecondform' value='Send second form!'>";

Но тогда этот jquery не отвечает

$('#submitsecondform').click(function(event){
alert('second form posted');
});

Я не могу заставить работать новую кнопку submit, поскольку она не известна при начальной загрузке.

Что нужно добавить или написать по-другому, чтобы вторая форма также работала? (И третий, четвертый и т. Д.?)

Answer 1

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

Чтобы обойти это, вы можете зарегистрировать событие на body element вместо.

Что-то вроде следующего должно работать для вашего варианта использования:

$('body').on('click', '#submitsecondform', function() {
    alert('second form posted');
});