javascript - jquery 不检测点击子元素

Question

我创建了一个 div 元素，它应该是一个联系人列表。它应该包含其他 div。 我想要做的是在每个列表项上(在每个内部 div 上)附加一个点击处理程序。 但是点击处理程序永远不会被触发。

$(".contact").on("click", function() {
  alert("clicked");
});

.contacts {
  position: absolute;
  top: 10px;
  left: 300px;
  width: 100px;
  height: 250px;
  border-color: black;
  border-style: solid;
  z-index: 1;
  overflow: scroll;
}
.contact {
  position: relative;
  width: 80%;
  height: 20%;
  border-style: solid;
  border-color: red;
  z-index: 100;
}

<div id="contactList" class="contacts">
  <div id="1" class="contact">one</div>
  <div id="2" class="contact">two</div>
  <div id="3" class="contact">three</div>
</div>

如果我为父 DOM 对象附加点击处理程序，它就会被触发。我在这里遗漏了什么吗？

编辑:

愚蠢的我，我忘了提到 child 是这样添加的:

$(".contacts").append($("<div id='"+id+"' class=contact >"+d[contact].name+"</div>"));

其中“d”和“id”变量来自成功的服务器调用。

Answer 1

你有

$(".contact").on("click",function(){

代替

$(".contacts").on("click",function(){

在文档加载事件中你有这个触发吗？ 否则它不会工作

$(function(){
    $(".contact").on("click",function(){
        alert("clicked");
    });
});

---

编辑:

由于 OP 忘记提及一些重要的事情，这里是我的回答。

类名周围没有'。这应该有效:

$(".contacts").append($("<div id='"+id+"' class='contact' >"+d[contact].name+"</div>"));

---

编辑 2

您还可以使用 children()方法:

$(function(){
    $(".contacts").children("div").on("click",function(){
        alert("clicked");
    });
});