无法在网页上获取选项卡名

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当我在控制台中检查它时，我得到了"Exception: 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>

​