Question

我创建了一个程序，该程序从SQL数据库中打印出一个列表。到目前为止，一切都很好。我可以打印出清单。但是，最近，我尝试为打印出的每个项目添加一个“ X”。最终，这将变成一个系统，用户可以通过该系统单击X来删除项目，但我想通过婴儿步骤来完成此操作。因此，我一直在努力做到这一点，以便当用户单击这些“ X”之一时，在执行任何操作之前，它会向控制台打印“ hello”。但是，这不起作用。

我尝试用两种方式编写。当我这样做时：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To Do List</title>
  <!-- Latest compiled and minified CSS & JS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body onload = "showList()">

<ol></ol>

  <script type="text/javascript">


    function showList(){


      $.get("/api/toDoList", function(data) {
        console.log(data);

        for (var i = 0; i < data.length; i++) 
        {
          $("ol").append("<li>" + data[i] + "<span id ='" + i + "'>X</span>" + "</li>");
    }



      });
    };

 $("span").click(function(){
  console.log("Hello!");
});
 //why doesn't this work, or putting an onclick function the span!?
  </script>
</body>
</html>

它什么都不做。

当我这样做时：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To Do List</title>
  <!-- Latest compiled and minified CSS & JS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body onload = "showList()">

<ol></ol>

  <script type="text/javascript">


    function showList(){


      $.get("/api/toDoList", function(data) {
        console.log(data);

        for (var i = 0; i < data.length; i++) 
        {
          $("ol").append("<li>" + data[i] + "<span id ='" + i + "' onclick = 'delete()'>X</span>" + "</li>");
    }



      });
    };

function delete(){
  console.log("Hello!");
}

  </script>
</body>
</html>

我收到一条错误消息，提示“未捕获的SyntaxError：意外的令牌删除。”

Answer 1

delete是保留关键字，您不能设置函数名称delete，可以将名称更改为其他名称，如delete1

   function showList(){


      $.get("/api/toDoList", function(data) {
        console.log(data);
        data = [1,2,3];
        for (var i = 0; i < data.length; i++) 
        {
          $("ol").append("<li>" + data[i] + "<span id ='" + i + "' onclick = 'delete1()'>X</span>" + "</li>");
    }



      });
    };

function delete1(){
  console.log("Hello!");
}

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To Do List</title>
  <!-- Latest compiled and minified CSS & JS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body onload = "showList()">

<ol></ol>

  
</body>
</html>

Answer 2

第一个代码段的问题。

它什么都没做，因为您附加了点击事件：

.element-to-dark { background-color: hsl_d(1, 12); } .element-to-light { background-color: hsl_d(1, 22); }

在异步调用之外，这意味着事件已附加到尚未在DOM中的$("span").click(function(){ console.log("Hello!"); });元素上，因为该调用尚未完成。

如果您要将事件附加到将来会添加到DOM中但尚不存在的元素上，请使用委托事件，如下所示：

span

第二个代码段的问题。

这种方法效果很好，因为处理程序已内嵌HTML代码，但现在不建议这样做，因此建议您使用我在代码段中提供的替代方法。正如Hien Nguyen已经提到的那样，您得到的错误是，因为//the 'ol' is in the DOM since the beginning, so the event is attached fine, //then you pass the actual element you want the event to be triggered on, as a //second parameter, in this case 'span' //this way, it does not matter when 'span's are added to the 'ol', the event //will always work on them $('ol').on('click', 'span', function(){ });是JS中的保留字，所以您不能将其用作函数名。

HIH

delete

function showList(){
  //$.get("/api/toDoList", function(data) {
    //console.log(data);
    let data = ['d1', 'd2', 'd3']; //this is just test data because I can't access '/api/toDoList' (duh)
    for (var i = 0; i < data.length; i++) {
      $("ol").append("<li>" + data[i] + " <span id ='" + i + "'>X</span>" + "</li>");
    }

  //});
};

    $('ol').on('click', 'span', function(){
        console.log("Hello! " + $(this).parent().text());
    });

showList();

span{
  cursor: pointer
}

无法在打印列表中触发功能

2 个答案: