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忘了提到一些关键的东西，这是我对此的回答。

没有＆＃39;在类名周围。这应该有效：

$(".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（“点击”，“功能”）的简写。

示例：

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

jquery没有检测到click元素

2 个答案: