Question

在我的应用程序中，它解析xml文件中的数据，然后在<li>列表中显示数据。因此，有一个<ul>列表和一个xml文件循环，用于在每个<li>标记中放置一些特定数据。它成功读取xml文件并创建列表，但问题是列表有点不活跃。例如，我创建了一个click函数，因此当点击alert("done!");时它会提供<li>，但它不起作用。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

有谁知道为什么会这样？

Answer 1

您可以使用委托：

$(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>

Answer 2

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

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

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

https://jsbin.com/jicawe/edit?html,css,js,output

Answer 3

稍作更改，将点击事件移至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!");
  });
}

Answer 4

你可以这样做。

此处应用 Event Propagation

的概念

所以你可以获得点击事件，如：

$('.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>

希望它有所帮助。

Answer 5

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

Answer 6

由于您将onclick侦听器直接添加到li元素，如果li通过AJAX回调从ul添加/删除，则无效。当您首次将onclick附加到li时，ul尚未附加到onclick，它将不会执行任何操作。

可以通过将ul侦听器附加到li本身来完成。然后检查目标ul是否在$('panel1 ul').on('click', 'li', function() { console.log('list clicked!'); });内点击。

panel1 ul

这意味着ul中每个点击的元素都会被委派给li。如果是<% %>，则将执行回调。

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

6 个答案:

示例