javascript - 在 HTML 中将 Jquery UI 添加到 UL

Question

我希望能够将 jquery UI 添加到 GoalNotes 的列表中 此表由用户在“name1”和“data1”输入字段中输入的内容填充。每次我给一个 id 时，程序都会中断并且我没有收到任何错误。关于如何将动画应用于用户输入数据后添加的表格行，有什么想法吗？

html

<section class="section section--active color1" data-letter="M">
  <article class="section__wrapper">
    <h1 class="section__title">Monday</h1>
    <div id="Monday" class="tabcontent">
      <form name="goalsList1" action = "/created" method="POST">
        <div id="tab1">
          <table>
            <tr>
              <td><b>New Goal:</b><input type="text" name="name1" id="name1"></td>
              <td><b>Notes:</b><input type="text" name="data1" id="data1"></td>
              <td>
                <input type="submit" value="Save"  onclick="SaveItem(1)"> 
              </td>
            </tr>
          </table>
        </div>
        <div id="items_table1">
          <h2>List of goals</h2>
          <table id="list1" contenteditable> </table>
          <p>
            <label><input type="button" value="Clear" onclick="ClearAll(1)"></label>
          </p>
        </div>
      </form>
    </div>
  </article>
</section>

javascript

function doShowAll(numOfWeek) {
  if (CheckBrowser()) {
    var key = "";
    var list = "**<tr><th>Goal</th><th>Notes</th></tr>**\n";
    var i = 0;
    var goals = localStorage[numOfWeek] ? JSON.parse(localStorage[numOfWeek]) : {};
    var goalsKeys = Object.keys(goals);
    for (i = 0; i < goalsKeys.length; i++) {
      key = goalsKeys[i];
      list += "<tr><td>" + key + "</td>\n<td>"
      + goals[key] + "</td></tr>\n";
    }
    if (list == "<tr><th>Goal</th><th>Notes</th></tr>\n") {
      list += "<tr><td><i>nothin' here</i></td>\n<td><i>nothin' here either</i></td></tr>\n";
    }
    document.getElementById('list'+numOfWeek).innerHTML = list;

  } else {
    alert('Cannot store list as your browser do not support local storage');
  }
}

$(document).ready(function(e) {
  $('#due-date').datepicker();
  $('#add-todo').button({
    icons: {
      primary: "ui-icon-circle-plus"
    }
  }).click(function() {
    $('#new-todo').dialog('open');
  }); // end click
  $('#new-todo').dialog({
    modal: true,
    autoOpen: false,
    close: function() {
      $('#new-todo input').val(''); /*clear fields*/
    },
    buttons : {
      "Add task" : function() {
        var taskName = $('#task').val();
        var dueDate = $('#due-date').val();
        var beginLi = '<li><span class="done">%</span><span class="delete">x</span>';
        var taskLi = '<span class="task">' +   taskName + '</span>';
        var dateLi = '<span class="due-date">' +   dueDate + '</span>';
        var endLi = '</li>';
        $('#todo-list').prepend(beginLi + taskLi + dateLi + endLi);
        $('#todo-list').hide().slideDown(250).find('li:first')
        .animate({
          'background-color': '#ff99c2'
        },250)
        .animate({
          'background-color': '#d9b3ff'
        },250).animate; // end animate
        $(this).dialog('close');
      },
      "Cancel" : function() {
        $(this).dialog('close');
      }
    }
  }); 

  $('#todo-list').on('click','.done',function(e) {
    var $taskItem = $(this).parent("li");
    var $copy = $taskItem.clone();
    $('#completed-list').prepend($copy);
    $copy.hide().slideDown(); 
    $taskItem.remove();
  }
                    ); // end on

  $('#todo-list, #completed-list').on('click','.delete',function(e) {
    $(this).parent("li").slideUp(250, function() {
      $(this).remove();
    }); // end slideup
  }); // end on

  $('#todo-list').sortable();

}); // end ready

http://jsbin.com/digefufeca/edit?html,css,js,console,output

Answer 1

问题

每当您点击按钮时，带有 nane goalsList1 的 form 就会发送。

为什么？因为按钮是 submit 按钮。

解决方案

1. 将按钮的类型替换为button。 ( link )
2. 通过 event.preventDefault() 阻止表单提交。 ( link )

还有很多方法，但这些是主要的。

注意:您的代码仍然无法正常工作，但现在您可以看到错误消息。