綁定點擊功能不能正常工作

我對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!"); 
    });

在我的代碼警報從未調用，我在這裏錯過了什麼？

有什麼建議嗎？

來源

2013-03-11 amir moradifard

通過這個http://stackoverflow.com/tags/jquery/info閱讀 - 它更可能缺少一個document.ready標記 – 2013-03-11 21:47:48

可能的原因：1）未包含jQuery 2）包含此代碼後的jQuery 3）未包裝在document.ready中4）腳本中某處出現JavaScript錯誤。控制檯中是否有錯誤？ – JJJ 2013-03-11 21:50:36

我已經使用Click Bind作爲ID的元素，如下所示：$（'＃RegisterCustomerButton'）。bind（'click'，function（）{}）;他們工作正常。 – 2013-03-11 21:52:00

您可能在加載跨度之前調用jquery代碼。你有兩個選擇

做時，該DOM is ready

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

或者使用delegation

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

Sample of working code

來源

2013-03-11 21:51:39

'.delegate（）'已被棄用近1.5年。 – JJJ 2013-03-11 21:55:07

@Juhana謝謝，用'on'修正它 – 2013-03-11 21:56:41

這是正確的答案 – iAmClownShoe 2013-03-11 21:57:48

綁定點擊功能不能正常工作

回答

相關問題