Question

我刚开始学习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!');
});

Answer 1

这是一个错字，className为catItem，小写c，classNames区分大小写

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

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

FIDDLE

Answer 2

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

（没有相关但是）你没有img =＆gt;的结束标记<img src="cat.png"/>
.CatItem应为.catItem
您event.preventDefault =＆gt; event但function遗失了function(e) :)

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

<强>代码

{{1}}

Answer 3

尝试删除此event.preventDefault();这会阻止您的代码正常工作，但如果您愿意，可以使用不同的方法，但首先尝试删除它并查看您的代码是否有效。

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

享受（：

检测列表中链接的单击

4 个答案:

概念

错误

JSFiddle (link)

HTML示例

的jQuery