Question

我有一个嵌入div的图像。在图像的顶部，我有一个fontawsome图标。单击该图标时，将打开一个选项列表。这些选项基本上是div中的简单单词。我想打印＆＃34;嗨＆＃34;当我点击这些单词时。我现在正在这样做：

$(".label").bind("click", function(e) {
  e.stopPropagation();
  console.log('Hi');

});

此事件现在没有被触发。

我查看了其他人jQuery click on div that is on top of another div发布的问题，我尝试使用e.stopPropagation()，但这也不起作用。

这是我的代码 https://jsfiddle.net/06mqh3gs/5/

有什么想法吗？

Answer 1

因为您正在从JS端创建Dom元素。您只需在循环中添加事件侦听器即可。 xD ......

 function loadKeywords(){
          for(i=0;i<keyword.length;i++){
            $('<div/>', {
                class:"label",
                id:"label_"+i,
                height: "15",
                html:keyword[i]
            }).appendTo(".form");
               $("#label_"+i).bind("click", function(e) {
              e.stopPropagation();
              alert(i);

            });
          }
       }

Answer 2

我修改了您的fiddle，现在它正在运行。

这是您的固定事件活页夹：

$(".profile-img-container").on('click', '.label', function() {
   alert("lalala");
});

您必须使用此构造将事件侦听器绑定到动态添加的元素，并且必须提供始终存在于页面上的静态容器

Answer 3

This answer非常有帮助。

要捕获在声明事件侦听器后创建的元素上的事件 - 您应该绑定到父元素或层次结构中较高的元素。

而不是：

$(".label").bind("click", function(e) {
  e.stopPropagation();
  console.log('Hi');
});

尝试：

$(document).on("click", ".label", function(e) {
  console.log('Hi');
});

识别点击JS中另一个div顶部的div？

3 个答案: