jQuery .submit() not triggering

Question

Я много раз искал, но не могу узнать, почему мой jQuery .submit() не будет запускаться. Я также пробовал с .click() для кнопки отправки.

В настоящее время я получил шаблон Div (включает в себя форму):

<div class="reply-to-existing-message" style="display: none"> 
     <form class="reply-message-form"> 
      <textarea id="post-reply-message-textarea" name="PostReplyMessage[message]" rows="3" cols="40" style="resize: none"></textarea> 
      <input class="reply-to-message-id" type="hidden" name="PostReplyMessage[id]" /> 
      <input class="post-reply-message-submit" type="submit" value="Reply"/> 
     </form> 
    </div> 

прилагает это сообщение с помощью JQuery, когда кнопка нажата ответа (произвожу выпадающую форму ответа так что пользователь может ответить к сообщению). Это отлично работает (дважды проверяется с помощью Firebug).

Однако, мой код jQuery не выдает предупреждение, когда я нажимаю кнопку отправки, так что это даже не запускается. Может кто-нибудь объяснить, почему это происходит, спасибо! JQuery код:

$(document).ready(function() { 
    $('.reply-message-form').submit(function() { 
     alert('test'); 
     return false; 
    }) ; 
}); 

Answer 1

Если вы динамически добавлять контент, что статический вызов до .submit() не подходит для вас. Это привяжет обработчик событий только к элементам, которые соответствовали селектору во время его запуска, поэтому любые добавленные после этого элементы не будут привязываться к обработчику события.

Решение событие делегации, используя .on() функцию:

$(document).on('submit', '.reply-message-form', function(e) { 
    alert('test'); 
    return false; 
}); 

В идеале, а не с помощью document, вы бы выбрать ближайший статический (т.е. существует при загрузке страницы) элемент, который будет содержать весь ваш динамический контент.

В качестве альтернативы, если вы используете версию JQuery до 1,7 и, следовательно, не имеют доступа к функции .on(), вы можете использовать функцию .delegate() вместо:

$(document).delegate('.reply-message-form', 'submit', function(e) { 
    alert('test'); 
    return false; 
}); 

Answer 2

Для динамически создаваемых элементов, вы должны делегировать события, вы можете использовать метод on, попробуйте следующее:

$(document).ready(function() { 
    $(document).on('click', 'input[type=submit]', function() { 
     alert('test'); 
     return false; 
    }); 
});