2014-10-31 52 views
0

我已經創建了一個應該是聯繫人列表的div元素。它應該包含其他div。 我想要做的是在每個列表項目(每個內部div)上附加一個點擊處理程序。 但點擊處理程序永遠不會被觸發。 jquery沒有檢測到點擊子元素

$(".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」的變量來自於成功的服務器調用。

+1

這是你的樣品http://jsfiddle.net/a6ze1cyo/,它是精細運行,請問是什麼問題? – 2014-10-31 19:51:15

+0

所以如果你改變選擇器到'$(「。contacts」)。'它有效嗎? – dfsq 2014-10-31 19:51:24

+0

@paris你有沒有得到任何JS錯誤? – 2014-10-31 19:52:17

回答

2

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

稍微好一點的把這個事件上的方式是在文檔準備功能使用.click jquery函數結合頁面加載。這是.on(「click」,FUNCTION)的簡寫。

例子:

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

這是如何更好? http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click – 2014-11-01 19:33:36

+0

以便您的事件處理程序不在全局空間中。而且,因爲在jQuery代碼中點擊最有可能的調用,我寧願輸入對其他人更易讀的短手版本。鏈接說話的內存,但如果你擔心使用.click的內存多餘的字節,那麼你的應用程序可能有其他問題。 – 2014-11-03 16:03:56

+0

沒有在鏈接的討論中重複參數,我眼中最大的優勢是:'與上面的[.on()],一個匹配您的選擇器的所有元素的處理程序,包括動態創建的' – 2014-11-04 14:23:26