了解/点击属于同一类的动态附加元素列表中的哪些元素

Question

I'm developing a web app to search items on a catalogue, so I wrote a script to dynamically attach to a unordered list a li item beloging to '.item' class. 我正在开发一个Web应用程序来搜索目录中的项目，因此我编写了一个脚本，以动态地将li项目粘贴到“ .item”类上，以将其动态附加到无序列表。
My problem is that for every item, I want open a specific page(not yet implemented) that describes his features, but with the following piece of javascript code doesn't work for my purpose 我的问题是，对于每个项目，我都想打开一个描述其功能的特定页面（尚未实施），但是使用以下JavaScript代码无法达到我的目的

$(".item").on("tap", function () {
  window.open("item_page.html");
   });

because it can't discriminate beetween the items since all the items, for styling reasons, are in the '.item' class. 因为它不能区分项目之间的区别，因为出于样式原因，所有项目都在'.item'类中。 Then, when I click/tap on a item, a lot of new windows are opened, instead of only one. 然后，当我单击/点击一个项目时，将打开许多新窗口，而不是仅一个。
In summary, I'd like that when I tap/click on an item, only the linked page is opened and not others. 总而言之，我希望当我点击/单击一个项目时，仅打开链接的页面，而不打开其他页面。 I tried also working on 'id' istead of 'class' assigning an id to every item created, but it doesn't work. 我也尝试过使用“ id”代替“ class”为创建的每个项目分配一个id，但这是行不通的。 Any ideas to fix the problem? 有解决问题的想法吗？

--EDIT-- - 编辑 -
That's the piece of document where I insert the items: 那是我插入项目的文档：

     <div id="items-wrapper" data-role="main">
        <ul id="items-list">
         <!--here I insert the items-->
        </ul>
    </div><!--end items-wrapper>-->

and that's the piece of the script(that works well) that I use to dynamically append the items to my "item-list": 这就是我用来动态地将项目追加到“项目列表”中的脚本片段（运行良好）：

 $("#items-list").append(
                        '<li class="item">' +
                        '<div class="item-photo-container">' +
                        '<img src="images/item_126.jpg" >' +
                        "</div><!--end item-photo-container-->" +
                        '<div class="item-info">'+
                        '<ul>' +
                        '<li><a><h3 class="item-name">' + title + '</h3></a></li>' +
                        '<li>' + aname + '</li>' +
                        '<li>' + date + '</li>' +
                        '</ul>' +
                        '</div><!--end item-info-->' +
                        '</li><!--end item-->'
                    );

Previously, I didn't specify that infos about items are retrieved by a json-ld file loaded by the client when the app is loaded for the first time, so I'm working only client-side. 以前，我没有指定有关项目的信息是由首次加载应用程序时由客户端加载的json-ld文件检索的，所以我仅在客户端工作。
At the address http://il2colcodino.altervista.org/galileo you can find thw whole web app. 在地址http://il2colcodino.altervista.org/galileo上，您可以找到整个Web应用程序。 Work is in progress, so if you want test it, wait 20-30 seconds on first load(no message will be displayed at the end of loading) before write something in the search bar and click on the magnifier. 工作正在进行中，因此，如果要测试，请在首次加载时等待20-30秒（加载结束时不会显示任何消息），然后在搜索栏中写一些内容，然后单击放大镜。 I suggest to write few letters to find enough matches, as 're' or 'mo'. 我建议写一些字母以找到足够的匹配项，例如“ re”或“ mo”。 The catalogue is in Italian. 目录为意大利语。

Answer 1

I am not sure but it seems you are attaching the event multiple times and that's why the page is being opened more than once. 我不确定，但是您似乎多次附加该事件，这就是为什么该页面多次打开的原因。 You need to make sure you are not attaching the event each time you append the element to the list because by attaching the event in the way you do it, you are attaching it to all .item elements on the page. 您需要确保每次将元素添加到列表时都不会附加事件，因为通过以事件的方式附加事件，您会将其附加到页面上的所有.item元素。 What I would do (this is just a suggestion since you didn't share the rest of your code), is to attach the event to the container and not to the element and to it only once. 我要做的（这只是一个建议，因为您没有共享其余的代码）是将事件附加到容器，而不是附加到元素，并且仅附加一次。 For example: 例如：

<html>
  <head></head>
  <body>
    <ul id='my-list'>
      <li class='item' data-page='my-page.html'>My appended item 1</li>
      <!--li class='item' data-page='my-page-2.html'>More will be appended dynamically</li-->
    </ul>
  </body>
  <script>
    jQuery(document).ready(function () {
      jQuery('#my-list').on('tap', '.item', function (e) {
        var page = jQuery(this).data('page');
        window.open(page); //In case you cannot add an <a></a> opening the page for any reason (which be ideal)
      });
    });
  </script>
</html>

Answer 2

The simplest way to do this is with this . 最简单的方法是使用this 。 In other words 换一种说法

var myItems = document.getElementsByClassName("items");

Then simply loop that array/collection attaching a click listener. 然后简单地循环该数组/集合并附加一个Click侦听器。

    try {
        for (var i = 0; i < myItems.length; i++) {
            myItems[i].onclick = function() {
                doSomething(this.innerHTML);
            };
        }
    }
    catch (e) {
        console.log('error is ' + e);
    }

了解/点击属于同一类的动态附加元素列表中的哪些元素

问题描述

2 个解决方案

解决方案1
0 2017-10-01 22:48:25

解决方案2
0 已采纳 2017-10-01 23:03:56

了解/点击属于同一类的动态附加元素列表中的哪些元素

问题描述

2 个解决方案

解决方案1 0 2017-10-01 22:48:25

解决方案2 0 已采纳 2017-10-01 23:03:56

解决方案1
0 2017-10-01 22:48:25

解决方案2
0 已采纳 2017-10-01 23:03:56