無法在網頁上獲取標籤名稱

Question

我正在學習YouTube上的待辦事項列表項目。 根據本教程，在按下「添加新項目」按鈕後，應該有一個名爲projectName的選項卡，附加到元素中。但我得到一個'未定義'標籤。這裏有什麼問題？
下面是代碼（如原）：

$(document).ready(function(){ 
 
      $("#projects").tabs(); 
 
      $("ul").sortable({axis:"x", containment:"#projects"}); 
 
      $("ol").sortable({axis:"y", containment:"#projects"}); 
 
      $("#btnAddProject").button() 
 
      .click(function(){ 
 
       $('#project-dialog').dialog({width:400, resizable:false, modal:true, 
 
       buttons:{ 
 
       "Add new project": function(){ 
 
        var projectName = $("new-project").val(); 
 
        $("<li><a href='#" + projectName + "'>" + projectName + "</a></li>") 
 
        .appendTo("#main"); 
 
        $("#projects").tabs("refresh"); 
 
        $("new-project").val(""); 
 
        $(this).dialog("close"); 
 
       }, 
 
       "Cancel":function(){ 
 
        $("new-project").val(""); 
 
        $(this).dialog("close"); 
 
       } 
 
       }}); 
 
      }); 
 
    
 
      });

/*.ui-tabs-nav{ 
 
      background: #6eb7d6; 
 
      }*/ 
 
    
 
      /*.ui-tabs-anchor{ 
 
      background: rgb(125, 181, 66) 
 
      }*/ 
 
.container{ 
 
      width:700px; 
 
      height:450px; 
 
      margin:70px auto; 
 
      border:2px solid rgb(125, 181, 66); 
 
      } 
 
      h2{ 
 
      color:rgb(125, 181, 66); 
 
      text-align: center; 
 
      } 
 
    
 
      #projects{ 
 
      width: 550px; 
 
      height: 250px; 
 
      margin:0px auto; 
 
      } 
 
    
 
      ol li{ 
 
      border: 1px dotted black; 
 
      cursor: pointer; 
 
      padding: 5px; 
 
      margin-bottom: 5px; 
 
      } 
 
    
 
      ol li:hover{ 
 
      background: #6eb7d6; 
 
      } 
 
      #btnAddProject{ 
 
      margin-left: 540px; 
 
      margin-bottom: 20px; 
 
      }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div class="container"> 
 
      <h2>To Do List</h2> 
 
      <button id="btnAddProject">Add Project</button> 
 
      <div id="projects"> 
 
      <ul id="main"> 
 
       <li><a href="#personal">Personal</a></li> 
 
       <li><a href="#work">Work</a></li> 
 
      </ul> 
 
    
 
      <ol id="personal"> 
 
       <li><input type="checkbox">Doctor appointment</li> 
 
       <li><input type="checkbox">Call the plumber</li> 
 
      </ol> 
 
    
 
      <ol id="work"> 
 
       <li><input type="checkbox">Complete test case document</li> 
 
       <li><input type="checkbox">Meet project manager</li> 
 
       <li><input type="checkbox">Record jQuery video</li> 
 
      </ol> 
 
    
 
      </div> 
 
     </div> 
 
     <div id="project-dialog" title="Add a project" style="display: none;"> 
 
      <label for="new-project">Project name:</label><input id="new-project" type="text"> 
 
    
 
     </div>

jQuery是3.2.1，jQuery的UI是1.12.1 當我檢查它的控制檯，我得到「[異常：TypeError：HTMLElement.remoteFunction（：2：14）]上的非法調用「錯誤消息。

Answer 1

認爲問題在於您將new_project引用爲標籤而不是ID。

$("new-project").val(); 

應該是：

$("#new-project").val(); 

請記住，這是雙方的新項目和取消功能。

Answer 2

$(document).ready(function(){ 
 
      $("#projects").tabs(); 
 
      $("ul").sortable({axis:"x", containment:"#projects"}); 
 
      $("ol").sortable({axis:"y", containment:"#projects"}); 
 
      $("#btnAddProject").button() 
 
      .click(function(){ 
 
       $('#project-dialog').dialog({width:400, resizable:false, modal:true, 
 
       buttons:{ 
 
       "Add new project": function(){ 
 
        var projectName = $("#new-project").val(); 
 
        $("<li><a href='#" + projectName + "'>" + projectName + "</a></li>") 
 
        .appendTo("#main"); 
 
        $("#projects").tabs("refresh"); 
 
        $("#new-project").val(""); 
 
        $(this).dialog("close"); 
 
       }, 
 
       "Cancel":function(){ 
 
        $("#new-project").val(""); 
 
        $(this).dialog("close"); 
 
       } 
 
       }}); 
 
      }); 
 
    
 
      });

/*.ui-tabs-nav{ 
 
      background: #6eb7d6; 
 
      }*/ 
 
    
 
      /*.ui-tabs-anchor{ 
 
      background: rgb(125, 181, 66) 
 
      }*/ 
 
.container{ 
 
      width:700px; 
 
      height:450px; 
 
      margin:70px auto; 
 
      border:2px solid rgb(125, 181, 66); 
 
      } 
 
      h2{ 
 
      color:rgb(125, 181, 66); 
 
      text-align: center; 
 
      } 
 
    
 
      #projects{ 
 
      width: 550px; 
 
      height: 250px; 
 
      margin:0px auto; 
 
      } 
 
    
 
      ol li{ 
 
      border: 1px dotted black; 
 
      cursor: pointer; 
 
      padding: 5px; 
 
      margin-bottom: 5px; 
 
      } 
 
    
 
      ol li:hover{ 
 
      background: #6eb7d6; 
 
      } 
 
      #btnAddProject{ 
 
      margin-left: 540px; 
 
      margin-bottom: 20px; 
 
      }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div class="container"> 
 
      <h2>To Do List</h2> 
 
      <button id="btnAddProject">Add Project</button> 
 
      <div id="projects"> 
 
      <ul id="main"> 
 
       <li><a href="#personal">Personal</a></li> 
 
       <li><a href="#work">Work</a></li> 
 
      </ul> 
 
    
 
      <ol id="personal"> 
 
       <li><input type="checkbox">Doctor appointment</li> 
 
       <li><input type="checkbox">Call the plumber</li> 
 
      </ol> 
 
    
 
      <ol id="work"> 
 
       <li><input type="checkbox">Complete test case document</li> 
 
       <li><input type="checkbox">Meet project manager</li> 
 
       <li><input type="checkbox">Record jQuery video</li> 
 
      </ol> 
 
    
 
      </div> 
 
     </div> 
 
     <div id="project-dialog" title="Add a project" style="display: none;"> 
 
      <label for="new-project">Project name:</label><input id="new-project" type="text"> 
 
    
 
     </div>