jquery - 将 Click 函数绑定到类不起作用

Question

我对 JQuery 很陌生，并且我的代码有以下问题。我有一个 HTML 代码如下：

<div id="productsBox">
    <span class="productItem">
        <img class="ProductImage" src="/media/1656/FootballShirts.png "></img>
        <span class="productName">Football Shirts</span>
        <span class="relavantSizeAdvice">2189</span>
     </span>

    <span class="productItem">
        <img class="ProductImage" src="/media/1697/FootballShorts.png "></img>
        <span class="productName">Football Shorts</span>
        <span class="relavantSizeAdvice">2189</span>
    </span>

    <span class="productItem">
        <img class="ProductImage" src="/media/1702/FootballSocks.png "></img>
        <span class="productName">FootBall Socks</span>
        <span class="relavantSizeAdvice">2189</span>
    </span>
</div>

我想将单击功能绑定到所有具有名为“productItem”的类的元素。我的 Jquery 代码如下：

$('.productItem').bind('click', function () {
        alert("Clicked!");
    });

在我的代码中，警报从未调用过，我在这里错过了什么？

有什么建议么？

Answer 1

您可能在加载跨度之前调用您的 jquery 代码。你有两个选择

在DOM 准备好时执行此操作

$(function(){
    $('.productItem').bind('click', function () {
        alert("Clicked!");
    });
})

或者使用委托

$(document).on('click', '.productItem', function(){
    alert("Clicked")
})

工作代码示例