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

Posted 2023-05-09

【中文标题】Javascript。功能在 .append 中不起作用

【英文标题】：Javascript. function is not working in .append

【发布时间】：2020-01-26 08:42:11

【问题描述】：

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 并且它不起作用。请帮忙。太棒了

【问题讨论】：

将$("#salon1") 替换为$("#salon"+(i + 1))，因为您的id 在单个页面上应该是唯一的

按钮的绑定在循环之外。它不能这样工作。我觉得问题出在附录中。当我创建这个 id 时，DOM 树无法识别它

交叉检查您的a 标签。您的 id 生成是否正确

【参考方案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>

【讨论】：

不，它不起作用。我个人觉得问题来自附加。与无法识别的 id 有关。

@Jason 似乎对我来说工作正常。我已经用工作证明更新了答案。

Tyvm。当我使用 Sergio 答案时效果更好（上面的评论）。他/她使用 document.createElement 我认为这是一个更好的解决方案。我为按钮使用了你的代码，它有助于区分哪个按钮是哪个。您在这里度过的时间表示赞赏。再次ty :)

【参考方案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 样式只是为了清晰。

【讨论】：

是的，这行得通。特维姆。为了区分我单击的按钮，我使用了 Saharsh 提供的代码（urs 下面的评论）。非常感谢您抽出时间来帮助我！

不客气。在循环内添加事件侦听器时要小心，因为它们是累积的，您最终可能会运行相同的函数数百次。

【参考方案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 的原因

【讨论】：

我不建议您使用.bind，因为从 v 3 开始，它已从 jquery 中删除，请使用 .on()

我错过了这个流入来解决问题。让我添加它