Javascript。功能在 .append 中不起作用

Question

HTML。

<div id="listsalon">
   <ul data-role="listview" data-inset="true" data-filter="true" >

   </ul>
</div>

JS.

for (var i = 0; i < arr.length; i++) {

   companyname = arr[i].CompanyName;

   picture = arr[i].Picture;

   address = arr[i].Address;

   $("#listsalon ul").append("<li class='ui-corner-all'>" + 
                        "<a id=" + '"' + "salon" + (i + 1) + '"' + "><img src='" + picture +           
                        "'style='height:160px; width:200px;' class='ui-corner-all'>" +
                        "<h2 style='font-size:13px'>" + companyname + "</h2>" +
                        "<p style='font-size:10px'>" + address + "</p>" +
                       "</a></li>");
                }

    $("#salon1").bind("click", function () {
        window.location = "salon.html"
    });

问题： 所以首先我提取数据并放入 3 个变量，公司名称、图片和地址。我有 x 组这些数据。我想输入一个列表形式。我能够列出，但该功能无法识别 id 并且它不起作用。请帮忙。太棒了

Answer 1

这是因为#salon1 元素是动态创建的。此外，不推荐使用 JQuery 中的.bind()。对于这种情况，您应该使用.on()

$("#listsalon").on("click", "a#salon1", function () {
    window.location = "salon.html"
});

更多jQuery click not working for dynamically created items

工作证明

var arr = [{"CompanyName": "A", "Picture": "https://via.placeholder.com/140x100", "Address": 1}, {"CompanyName": "B", "Picture": "https://via.placeholder.com/140x100", "Address": 2}];

for (var i = 0; i < arr.length; i++) {
  var companyname = arr[i].CompanyName;
  var picture = arr[i].Picture;
  var address = arr[i].Address;
  $("#listsalon ul").append("<li class='ui-corner-all'>" + 
                            "<a href='#' id=" + '"' + "salon" + (i + 1) + '"' + "><img src='" + picture +           
                            "'style='height:160px; width:200px;' class='ui-corner-all'>" +
                            "<h2 style='font-size:13px'>" + companyname + "</h2>" +
                            "<p style='font-size:10px'>" + address + "</p>" +
                            "</a></li>");
   $("#listsalon").on("click", "a#salon"+(i+1), function () {
      alert("Redirecting...");
      window.location = "salon.html"
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listsalon">
   <ul data-role="listview" data-inset="true" data-filter="true" ></ul>
</div>

Answer 2

要将事件侦听器添加到动态创建的对象，您需要使用document.createElement 创建 DOM 对象。这使您可以在添加之前保留实际元素。

然后，您可以像使用使用查询字符串检索到的任何其他对象一样使用它。

$(document).ready(function() {
  let array = ["a", "b", "c"];
  
  for (let i = 0; i < array.length; i++) {
    let el = document.createElement('li');
    $(el).html(array[i]);
    
    $(el).on('click', function() {
      alert('Click!');
    });
    
    $("#listsalon ul").append(el);
  }
});

#listsalon ul li {
  background-color: #eee;
  padding: 0.5em;
  margin-bottom: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listsalon">
   <ul data-role="listview" data-inset="true" data-filter="true" >
   </ul>
</div>

CSS 样式只是为了清晰。

Answer 3

这是一个示例。 .bind() 在JQuery 中是deprecated。对于这种情况，您应该使用.on()

for (var i = 0; i < 5; i++) {
   $("#listsalon ul").append("<li class='ui-corner-all'>" + 
      "<a id=" + '"' + "salon" + (i + 1) + '"' + ">"+(i + 1)+"</a></li>");
    $("#salon"+(i + 1)).on("click", function () {
        alert('clicked')
    });
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listsalon">
<ul>

</ul>
</div>

您在 for loop 之外定义了您的 click 函数。这就是DOM 无法识别您的id 的原因