如何点击功能为一个自动建立的li列表

因为您将onclick侦听器直接添加到li元素，所以如果通过AJAX回调将li从ul中常规添加/删除，它将不起作用。当您第一次将onclick附加到尚未附加到ul的li时，它将不起任何作用。

这可以通过将onclick侦听器附加到ul本身来实现。然后检查目标CCD_ 17是否在CCD_。

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

这意味着panel1 ul中的每一个被点击的元素都将被委派到ul。如果是li，则将执行回调。

您可以使用委托：

$(document).on("click", "pane1 ul li", function(){ ... });

样品

function createLI() {
  var html = "";
  for (var i = 0; i < 5;) {
    html += "<li>" + ++i + "</li>";
  }
  $("#list").append(html);
}
function registerEvents() {
  $(document).on("click", "#content ul li", function() {
    alert($(this).text());
  })
}
registerEvents();
createLI();

li {
  background: #eee;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="content">
  <ul id="list"></ul>
</div>

这是因为javascript运行asyn
当数据仍在等待ajax时。

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

已执行
这就是为什么它不起作用
您可以简单地将on（）函数放在parse（）函数的末尾
这是我的jsbin

https://jsbin.com/jicawe/edit?html，css，js，输出

稍作更改，将单击事件移动到function parse中。由于ajax是异步的，当执行$.ajax时，它在另一个线程中执行，同时执行$(".panel1 ul li").on("click",...)，但发现选择器一无所获。因此，将点击事件移动到解析函数中可以确保在ajax完成后添加事件。

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

您可以按照以下方式进行操作。

此处应用事件传播的概念

因此，您可以获得点击事件，如：

$('.panel1').on("click", "ul li", function(){

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').on("click", "ul li", function(){
  alert( $( this ).children( "p" ).text());
})

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>

希望能有所帮助。

给你的li类；

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

然后尝试；

$(".lis").live("click", function(){
    alert("done!");
});