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