.preventDefault()不再正常工作

时间:2018-09-16 23:17:06

标签: javascript jquery html ajax

我必须缺少一些简单的东西。在我添加了一个新元素以在导航栏中使用按钮切换输入框之前,该脚本一直按预期运行。现在,表单将在提交时重定向。

预期的行为是,提交输入后,它会在注释框下方显示为注释。

当前是我的.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>

2 个答案:

答案 0 :(得分:0)

您的表单具有id =“ Form”,但是您正在使用jQuery选择类。

即您需要:

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

请注意,序列化逻辑也在使用类,请更新您的引用。

答案 1 :(得分:0)

//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()
})