绑定点击功能不能正常工作

我对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

绑定点击功能不能正常工作

回答

相关问题