Question

提交待办事项列表项后，页面将刷新。我使用e.stopPropagation（）试图阻止默认页面重新加载（没有帮助）。

这是我的JavaScript。有关我的完整代码，请参阅我的CodePen。

SELECT TIMEDIFF("2018-04-09 11:59:59","2018-04-09 08:45:00" );

Answer 1

使用按钮上的e.preventDefault()来阻止表单提交。在任一处理程序中都不需要e.stopPropagation。

Answer 2

如果要禁用默认的keypress行为，则需要在preventDefault事件处理程序中使用keypress。

尝试更改为e.stopPropagation至e.preventDefault()：

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

Answer 3

更改<button class="button">+</button>

到<button type="button" class="button">+</button>在HTML

中

由于您尚未指定按钮类型，因此会将其视为提交类型按钮。因此，点击该页面即被提交。因此，您只需将按钮类型指定为按钮。

或只是将e.stopPropagation();更改为e.preventDefault();

希望这有帮助！

Answer 4

在按钮e.preventDefault()功能

后添加click

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

Answer 5

问题是当您在按钮上触发click时表单正在提交。尝试在代码中添加：

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

我建议您删除该表单，因为您从未提交过该表单。否则，我建议只处理表单提交，并让您对该事件采取行动。这样：

$(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');
  });

});

点击输入时刷新待办事项列表

5 个答案: