.preventDefault () больше не работает как следует

Question

Я должен упустить что-то простое.Этот скрипт работал, как и ожидалось, пока я не добавил новый элемент для переключения поля ввода с помощью кнопки на панели навигации.Теперь форма будет перенаправлена ​​на подачу.

Ожидаемое поведение заключается в том, что при вводе он отображается как комментарий под полем для комментариев.

В настоящее время мой .preventDefault ();больше не работает с кликом, так как меня перенаправляют.Я потратил слишком много времени, чтобы выяснить, что пошло не так, и мне нужно немного понять, что я изменил или неправильно реализовал.

$(function () {

    //Toggle compose input box
    $(".compose").click(function () {
        event.preventDefault();
        $(".new").slideToggle("slow");
        textarea.focus()
    })

    //compose input to comment
    $('.Form').on('submit', function (event) {
        event.preventDefault();
        // 1. Grab the content of the form
        let formData = $('.Form').serialize();
        let entry = $('.textarea input').val();

        console.log(entry)
        if (entry === null || entry === '') {
            alert('text too short!')
        } if (entry.length > 140) {
            alert('text too long!')
        } else {
            // 2. Submit using ajax
            $.ajax('/comments', {
                method: 'POST',
                data: formData,
            }).then(function (success) {

                console.log('succesful')
                // 4. Make sure the new comments shows
                return $.ajax('/comments');
            }).then(renderComments());
        }
    });
});

Html:

<main class="container">
  <section class="new">

    <form action='/comments' Method='POST' id="Form">
      <h2>Compose Comment</h2>
      <textarea id="textarea" name="text" onfocus='this.select()' placeholder="What are you humming about?"></textarea>
      <input class="submit" type="submit" value="Submit">
      <span class="counter">140</span>
    </form>
  </section>

Answer 1

//Toggle compose input box
$( ".compose" ).click(function() {
event.preventDefault();
$( ".new" ).slideToggle( "slow" );
 textarea.focus()
})

Вы не передаете параметр 'event' в этой привязке, как показано ниже, чтобы заставить preventDefault функционировать надлежащим образом.

//Toggle compose input box
$( ".compose" ).click(function(event) {
event.preventDefault();
$( ".new" ).slideToggle( "slow" );
 textarea.focus()
})

Answer 2

Ваша форма имеет идентификатор = "Форма", но вы выбираете класс с помощью jQuery.

Т.е. вам нужно:

//compose input to comment
$('#Form').on('submit', function(event) {
  event.preventDefault();
}

Будьте осторожны, логика сериализации также использует класс, обновите ваши ссылки.