0

私は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!");
    });

私のコードでは、アラートは呼び出されませんでした。ここで何を見逃しましたか？

助言がありますか？

4

1 に答える 1

4

おそらく、スパンがロードされる前に jquery コードを呼び出しています。2 つのオプションがあります

DOM の準備ができたら実行する

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

または委任を使用する

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

作業コードのサンプル

于 2013-03-11T21:51:39.363 に答える