无法在网页上获取标签名称

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>