附件李在提交表格后消失

Appended li disappears after submit form

本文关键字：表格 消失 提交      更新时间：2023-09-26

我正在使用jquery制作一个todo列表。我在提交表格时遇到问题，附件李立即出现并消失。有人能帮我吗？

这是我迄今为止的Jquery代码：

$(function(){
$('input:checkbox').click(function(){
    if ($(this).is(':checked')) { 
        $(this).parent().addClass('completed');
    }
    else {
        $(this).parent().removeClass('completed');
    }
});
$('#clearComp').click(function(){
    $('.completed').fadeOut();
});
$('#todo_from').submit( function(e) {
    e.preventDefault();
    return false;
});

});
function addTodo(){
    var itemToAdd = $('#txtBox').val();
    if ( itemToAdd ) {
        $('#todoList').append('<li class="todoBlk"><input type="checkbox"         class"checkbox">'+itemToAdd+'</li>');
    }
    $('#txtBox').val('').focus();
}

JS Bin

这是因为在按下Enter键时，表单会自行提交并强制刷新页面。因此，您应该使用.preventDefault()来防止这种情况发生：

$('form').on('submit', function(e) {
    var itemToAdd = $('#txtBox').val();
    if ( itemToAdd ) {
        $('#todoList').append('<li class="todoBlk"><input type="checkbox" class"checkbox">'+itemToAdd+'</li>');
    }
    $('#txtBox').val('').focus();
    e.preventDefault();
});

此代码还允许您删除onsubmit属性的内联JS。

更新：我还注意到您的示例中的一个问题是，您的按钮无法清除动态添加的选中项目。这是因为当首次在页面上执行jQuery时，click侦听器仅绑定到预先存在的元素。请考虑使用.on()将单击事件绑定到动态添加的列表项。以下是固定版本：http://jsbin.com/hiyuqikura/1/edit?html，js，输出

$(function(){
  // On submit, prevent default form action and add item if input is not empty
  $('form').on('submit', function(e) {
    var itemToAdd = $('#txtBox').val();
    if ( itemToAdd ) {
      $('#todoList').append('<li class="todoBlk"><input type="checkbox" class="checkbox">'+itemToAdd+'</li>');
    }
    $('#txtBox').val('').focus();
    e.preventDefault();
  });
  // Listen to click event on dynamically added elements
  $(document).on('click', 'input.checkbox', function(){
    if ($(this).is(':checked')) { 
      $(this).parent().addClass('completed');
    }
    else {
      $(this).parent().removeClass('completed');
    }
  });
  $('#clearComp').click(function(){
    $('.completed').fadeOut();
  });
});

注释掉$（'#todo_from'）.submit（）函数并将表单标记更改为此

  <form id="todo_form" onsubmit="addTodo(); return false;">

此处的id $('#todo_from').submit错误。应为#todo_form

相关文章：