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对象一个单击处理程序，它就会被触发。我在这里错过了什么吗？

编辑：

我傻的，我忘了提，孩子们以这种方式添加：

$(".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"); 
    }); 
}); 

Answer 2

稍微好一点的把这个事件上的方式是在文档准备功能使用.click jquery函数结合页面加载。这是.on（“click”，FUNCTION）的简写。

例子：

$(document).ready(function(){ 
    $(".contact").click(function(){ 
     alert("clicked"); 
    }); 
});