待办事项列表在按Enter键后刷新

Question

Upon submitting a to-do list item, the page refreshes. I'm using e.stopPropagation() in an attempt to prevent the default page reload (doesn't help).

Here's my JavaScript. For my full code, see my CodePen .

$(function() {

  $('.button').click(function(e) {
    e.stopPropagation();
    let toAdd = $('input[name=listItem]').val();
    // Inserts li as first child of ul
    $('ul').prepend('<li>' + toAdd + '</li>');
    // Clears input box after clicking '+'
    $('input[name=listItem]').val('');
  });

  // Upon hitting enter, triggers button click and prevents page from refreshing and event bubbling and capturing/trickling
  $('input[name=listItem]').keypress(function(e) {
    e.stopPropagation();
    if (e.which == 13) {
      $('.button').click();
    };
  });

  $('ul').on('click', 'li', function() {
    // Upon list item click, toggleClass() adds class 'strike' for it and fadeOut() completely hides it
    $(this).toggleClass('strike').fadeOut('slow');
  });

});

Answer 1

Use e.preventDefault() on the button to prevent the form submission. You don't need e.stopPropagation in either handler.

Answer 2

When you want to disable the default keypress behaviour, you need to use preventDefault within the keypress event handler.

Try changing to e.stopPropagation to e.preventDefault() :

$('input[name=listItem]').keypress(function(e) {
    e.preventDefault();
    if (e.which == 13) {
        $('.button').click();
    };
});

Answer 3

Change <button class="button">+</button>

To <button type="button" class="button">+</button> In your HTML

Since you haven't specified the type of button it is treated as a submit type button. And hence on its click the page is being submitted. So you just have to specify the button type as button .

or just change e.stopPropagation(); to e.preventDefault();

Hope this helps!

Answer 4

Add e.preventDefault() after the button click function

if (e.which === 13) {
      $('.button').click();
      e.preventDefault()
    };

Answer 5

The problem is that the form is submitting when you trigger click on the button. Try adding this in your code:

$('form[name=listForm]').on('submit', function(e){
    e.preventDefault();
    return false;
});

I would suggest to remove the form, since you are never submitting it. Otherwise, I would suggest to just handle the form submission, and make you actions upon that event. This way:

$(function() {

  $('form[name=listForm]').on('submit', function(e) {
    e.preventDefault();
    let toAdd = $('input[name=listItem]').val();
    // Inserts li as first child of ul
    $('ul').prepend('<li>' + toAdd + '</li>');
    // Clears input box after clicking '+'
    $('input[name=listItem]').val('');
  });

  // Upon hitting enter, triggers button click and prevents page from refreshing and event bubbling and capturing/trickling
  $('input[name=listItem]').keypress(function(e) {
    if (e.which == 13) {
      $('form[name=listForm]').submit();
    };
  });

  $('ul').on('click', 'li', function() {
    // Upon list item click, toggleClass() adds class 'strike' for it and fadeOut() completely hides it
    $(this).toggleClass('strike').fadeOut('slow');
  });

});