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

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

＆＃13;

＆＃13;

class CrawlerSpider(scrapy.Spider):
    name = 'wikiCrawler'
    #allowed_domains = ['web']
    start_urls = ['https://en.wikipedia.org/wiki/List_of_sovereign_states']
    #counter = 1
    global list
    list = []

    def __init__(self):
        self.counter = 1
        pass

    def parse(self, response):

        for resultHref in response.xpath('//table[contains(@class, "wikitable")]//a[preceding-sibling::span[@class="flagicon"]]'):
            href = resultHref.xpath('./@href').extract_first()
            nameC = resultHref.xpath('./text()').extract_first()
            yield scrapy.Request(response.urljoin(href), callback=self.parse_item, meta={'Country': nameC})

    def parse_item(self, response):
        i = {}
        self.counter = self.counter + 1
        i['country'] = response.meta['Country']
        i['population'] = response.xpath('//tr[preceding-sibling::tr/th/a/text()="Population"]/td/text()').extract_first()
        yield i #this is where I would like to store the data instead of printing and then later print all together

＆＃13;

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

＆＃13;

 /*.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;
          }

＆＃13;

＆＃13;

＆＃13;