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>

我想将click函数绑定到名为“productItem”的类的所有元素。我的Jquery代码如下：

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

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

有什么建议吗？

Answer 1

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

在DOM is ready

时执行此操作

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

或使用delegation

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

Sample of working code

绑定Click函数到类不起作用

1 个答案: