Question

我正在使用jquery创建一个待办事项列表。提交表格时我有问题，附加的李出现并立即消失。有人可以帮帮我吗？

到目前为止，这是我的 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

Answer 1

注释掉$（＆＃39;＃todo_from＆＃39;）。submit（）函数并将表单标记更改为此

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

Answer 2

这是因为按下 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()将click事件绑定到动态添加的列表项。这是固定版本：http://jsbin.com/hiyuqikura/1/edit?html,js,output

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

Answer 3

你在$('#todo_from').submit找到了错误的ID。应为#todo_form

提交表格后，附加的li消失

3 个答案: