Javascript 检测对列表中链接的单击

我刚刚开始学习jQuery，我完全迷路了

我创建了一个列表，其中有猫的图片，当我点击其中一个时，我想将点击的图片复制到另一个div。但是，我已经无法获得点击事件。我已经在其他多个没有图片链接的列表上测试过了，我没有任何问题

当我点击一只猫时，信息应该会显示出来，但我无法让它正常工作

HTML：

<div id="cats">
    <div class="catTrack">
        <ul id="catItems">
            <li class="catGrid">
                <div class="catItem">
                    <a href="#" id="1">
                        <img src="cat.png">
                    </a>
                </div>
            </li>
        </ul>
    </div>
</div>

编辑：

未检测到选择器，因为我正在使用脚本将代码加载到

编辑2:

在此处找到解决方案：

最后脚本：

$(document).on('click', '#catItems li .catItem a', function(e){
    e.preventDefault();
    alert('Clicked a cat!');
});

---

这是一个输入错误，类名是

catItem

，带有小写的

c

，类名区分大小写

$(document).ready(function(){
    $("#catItems li .catItem a").click(function(event) {
        event.preventDefault();
        alert('Clicked a cat!');
    });
});

如果您想使用

事件

参数，大多数浏览器都要求您将其添加为参数

---

代码在这里：演示在这里：

• （与此无关，但）您没有

  img的结束标记

• .CatItem

  应该是

  .CatItem

• 您有

  事件。但是
  函数中缺少
  事件
  =>
  函数（e）

：）

代码

$(document).ready(function () {
    $("#catItems li .catItem a").click(function (e) {
        e.preventDefault();
        alert('Clicked a cat!');
    });
});

---

尝试删除此

事件。preventDefault（）这将阻止您的代码工作，但如果您愿意，您可以使用不同的方法获得它，但首先尝试删除它，然后查看您的代码是否工作。
概念
单击cat时，用它替换div

错误
您编写了
CatItem
，而不是
CatItem

JSFIDLE
HTML示例





另一个部门

jQuery
$（文档）.ready（函数（）{
$（“.catItem img”）。单击（函数（）{
event.preventDefault（）；
url=$（this.attr（'src'））
$（“#替换”）.html（“”）；
});
});

享受（：
你为什么有这个？
event.preventDefault（）；
你忘了发送处理程序。
$（“#catItems li.CatItem a”）。单击（函数（事件）
@Niang我添加了一点，为了防止点击链接时浏览器向上滚动，它没有阻止我的代码，我修复了事件处理程序；）不知何故，代码似乎是有效的，但当我在较大的代码块上实现相同的解决方案时，不会检测到单击事件，浏览器会回滚。唯一不同的是名称和链接有3个额外的属性。然后你没有使用正确的选择器。请尝试一些简单的方法，如
$（'selector'）。css（'color'，'red'）
查看您的目标元素是否正确，然后在找到适合您的选择器时添加单击处理程序。这是一个很好的解决方案。它不会检测选择器，因为我使用的是
.load（）
来填充#cats div。我猜这是因为它需要一两秒钟，javascript正在使用
$（document）。准备好了吗
。我该如何解决这个问题？查找事件委派。也就是说，在父元素上连接事件，但只处理所关心元素的事件
$(document).ready(function(){
    $("#catItems li .catItem a").click(function(event) {
        event.preventDefault();
        alert('Clicked a cat!');
    });
});

$(document).ready(function () {
    $("#catItems li .catItem a").click(function (e) {
        e.preventDefault();
        alert('Clicked a cat!');
    });
});

<div id="cats">
    <div class="catTrack">
        <ul id="catItems">
            <li class="catGrid">
                <div class="catItem">
                    <a href="#" id="1">
                        <img src="http://i.stack.imgur.com/XgLe7.gif?s=32&g=1" />
                         <img src="https://www.gravatar.com/avatar/cf617afb80769f89ec7e217d135be7e5?s=32&d=identicon&r=PG&f=1" />
                    </a>
                </div>
            </li>
        </ul>
    </div>
</div>

<div id="replaced">Another div</div>

$(document).ready(function(){
    $(".catItem img").click(function() {
        event.preventDefault();
        url = $(this).attr('src')
        $("#replaced").html("<img src="+url+"/>");
    });
});