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

【问题标题】：Can't get function triggered in printed list无法在打印列表中触发功能
【发布时间】：2019-06-15 03:51:45
【问题描述】：

我创建了一个程序，它从 SQL 数据库中打印出一个列表。到现在为止还挺好。我可以打印出清单。但是，最近我尝试在打印出来的每个项目上添加一个“X”。最终这将变成一个系统，用户可以通过单击 X 删除项目，但我想用小步骤来做到这一点。所以，我一直在努力做到这一点，以便当用户单击其中一个“X”时，它会在我做任何花哨的事情之前将“你好”打印到控制台。但是，这不起作用。

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

    <!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>

我收到一条错误消息，上面写着“未捕获的语法错误：意外的令牌删除。”

【问题讨论】：

标签： jquery function onclick

【解决方案1】：

您的第一段代码有问题。

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

$("span").click(function(){ console.log("Hello!"); });

在异步调用之外，这意味着事件被附加到 span 元素上，因为调用尚未完成。

如果您想将事件附加到将来要添加到 DOM 但尚未添加到 DOM 的元素，请使用委托事件，如下所示：

//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(){

});

您的第二段代码有问题。

这种方法效果很好，因为处理程序与 HTML 代码内联，但不再建议这样做，所以我建议您使用我在 sn-p 中提供的替代方法。正如 Hien Nguyen 已经提到的，您遇到的错误是，因为 delete 是 JS 中的保留字，因此您不能将其用作函数名。

嗨

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
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
-->

<ol></ol>

【讨论】：

【解决方案2】：

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>

【讨论】：