javascript - 如何单击自动构建的 li 列表的功能

Question

在我的应用程序中，它从 xml 文件解析数据，然后在 <li> 中显示数据列表。 所以有一个 <ul>列表和 xml 文件的循环，以将一些特定数据放入每个 <li>标签。 它成功读取了 xml 文件并创建了列表，但问题是该列表有点不活动。比如我做了一个click函数所以它给出alert("done!");当 <li>被点击，但它不工作。

这是我的代码:

var tracksArray = [];
$.ajax({
  url: 'https://dl.dropboxusercontent.com/u/33538012/playlist.xml',
  dataType: "xml",
  success: parse,
  error: function() {
    alert("Error: Something went wrong");
  }
});

function parse(document) {
  $(document).find("track").each(function() {
    tracksArray.push($(this).find('url').text());

    $(".panel1 ul").append(
      "<li id='row" + tracksArray.length + "'>" +
      "<p class='title'>" + $(this).find('title').text() + "</p>" +
      "</li>"
    );

  });
}


$(".panel1 ul li").on("click", function() {
  alert("done!");
})

div.app {
  margin: 50px auto;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
div.app > .blur {
  width: 100%;
  height: 100%;
  -webkit-filter: blur(5px);
}
div.mainSection,
div.dashboard {
  position: absolute;
  left: 0px;
  text-align: center;
  color: #fff;
  font-size: 20px;
}
div.mainSection {
  width: 100%;
  height: 85%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
}
div.dashboard {
  width: 100%;
  height: 15%;
  background: rgba(255, 0, 0, 0.5);
  bottom: 0;
}
div.mainSection > .panel1,
div.mainSection > .panel2,
div.mainSection > .panel3 {
  width: 100%;
  Height: 100%;
  Background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0px;
  top: 0px;
}
div.mainSection > .panel3 > p {
  margin-top: 80px;
}
.grid-button {
  background: none;
  border: none;
  padding: 3px;
  width: 100%;
}
.grid {
  display: inline-block;
  height: 4px;
  position: relative;
  width: 32px;
  transition: all 0.3s ease-in-out;
}
.grid:after,
.grid:before {
  content: '';
  position: absolute;
  background-color: #FFF;
  display: inline-block;
  height: 4px;
  left: 0;
  width: 32px;
  transition: all 0.3s ease-in-out;
}
.grid.open {
  background-color: #FFF;
}
.grid.open:after {
  top: 10px;
}
.grid.open:before {
  top: -10px;
}
.grid.close {
  background-color: transparent;
  transform: scale(0.9);
}
.grid.close:after,
.grid.close:before {
  top: 0;
  transform-origin: 50% 50%;
}
.grid.close:before {
  transform: rotate(135deg);
}
.grid.close:after {
  transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
  <div class="blur"></div>
  <div class="mainSection">
    <div class="panel1">
      <ul></ul>
    </div>
    <div class="panel2" style="display: none;"></div>
    <div class="panel3" style="display: none;"></div>
  </div>
  <div class="dashboard"></div>
</div>

如您所见，我的 js 代码的最后一部分用于在 <li> 时发出警报。被点击，但没有任何反应。

有人知道这是为什么吗？

Answer 1

因为您将 onclick 监听器直接添加到 li 元素，所以如果 li 被动态添加/删除，它将不起作用ul 通过 AJAX 回调。当您第一次将 onclick 附加到尚未附加到 ul 的 li 时，它不会执行任何操作。

这可以通过将 onclick 监听器附加到 ul 本身来完成。然后检查目标 li 是否在 ul 内点击。

$('panel1 ul').on('click', 'li', function() {
   console.log('list clicked!');
});

这意味着 panel1 ul 中的每个点击元素都将委托(delegate)给 ul。如果是li，回调将被执行。