检测对列表中链接的点击答案

【问题标题】：Detecting a click on a link in a list检测对列表中链接的点击
【发布时间】：2014-07-07 09:52:22
【问题描述】：

我刚开始学习 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>

jQuery：

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

编辑：

未检测到选择器，因为我正在使用脚本将代码加载到<div id="cats">

$(document).ready(function() {
    $("#cats").load("get_cats.php");
});

编辑 2：

在这里找到解决方案：https://stackoverflow.com/a/9426290/3677329

最终脚本：

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

【问题讨论】：

你为什么有这个？ event.preventDefault();
你忘记发送处理程序了..$("#catItems li .CatItem a").click(function(event)
@Niang 我补充说，为了防止点击链接时浏览器向上滚动，它并没有阻止我的代码，我修复了事件处理程序;)

标签： javascript jquery

【解决方案1】：

打错了，类名是catItem，小写c，类名区分大小写

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

如果您想使用event 参数，大多数浏览器都要求您将其添加为参数

FIDDLE

【讨论】：

不知何故代码似乎可以工作，但是当我在我的较大代码段上实现相同的解决方案时，未检测到单击事件并且浏览器向上滚动。唯一不同的是名称和链接有 3 个额外的属性。
那么你没有使用正确的选择器。试试$('selector').css('color','red') 之类的简单方法，看看您是否定位正确的元素，然后在找到适合您的选择器时添加点击处理程序。
这是一个很好的解决方案。它没有检测到选择器，因为我使用.load() 来填充#cats div。我猜这是因为它需要一两秒钟，而 javascript 正在使用$(document).ready。我该如何解决这个问题？
查找事件委托。也就是说，您将事件连接到父元素上，但您只处理您关心的元素的事件

【解决方案2】：

这是代码：这里是演示：http://jsfiddle.net/zrd8c/

（没有任何关系，但是）img 没有结束标签 => <img src="cat.png"/>
.CatItem 应该是 .catItem
您有event.preventDefault，但function 中缺少event => function(e)

:)

代码

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

【讨论】：

【解决方案3】：

尝试删除此event.preventDefault(); 这将阻止您的代码工作，但您可以根据需要使用它，但使用不同的方法，但首先尝试删除它并查看您的代码是否有效。

【讨论】：

【解决方案4】：

概念

当点击一只猫时，用它替换一个 div。

错误

你写的是CatItem而不是catItem。

JSFiddle (link)

HTML 示例

<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>

jQuery

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

享受（：

【讨论】：