Методы отправки формы JQuery не работают

Question

Я пытаюсь зафиксировать значение моих полей ввода при успешной отправке формы, которая будет отправлена ​​через socket.io и использована для уведомлений пользователей, но кажется, что три разных попытки вызвать мой jQuery потерпели неудачу, несмотря на выбор формыэлементы.Может ли кто-нибудь указать мне, где я ошибаюсь в моих утверждениях селектора, и каков будет лучший способ добиться захвата этой формы и связи с сервером socket.io?

Файл JavaScript:

$(document).ready(function() {
    var socket = io.connect('http://localhost:3000');

    socket.on('notification', function (data) {
        console.log(data);
    });

    $("#button.blog-comment__form-button").on("click", function(event){
        console.log("Comment Form triggered")
        console.log(event);
        //socket.emit('client-notification', { my: 'successful comment' });
    });

    $("#comment-form").bind('ajax:complete',function(result){
        console.log("Comment successfully submitted");
        console.log(result);
    });

    $("#comment-form").submit(function(event){
        console.log(".submit");
        console.log(event);
    });


});

HTML Форма комментария:

<form action="/app/blog/134jr2n/comment" method="post" name="blogComment" id="comment-form">
    <input type="hidden" name="_csrf" value="dsfhj424u2hfi2nf"/>
    <div className="col-md-9">
        <textarea name="comment" class="blog-comment__form-text-area"></textarea>
    </div>
    <div className="col-md-3">
        <button type="submit" className="blog-comment__form-button">Comment</button>
    </div>
</form>

Answer 1

Привязать событие к документу, как:

$(document).on("submit", "#comment-form", function(e){
    e.preventDefault();
    console.log('It works!');
});