jquery simple onclick event

Question

<a aria-expanded="false" data-toggle="tab" href="#pictures">
   <i class="pink ace-icon fa fa-gift bigger-120"></i>
    Pictures
</a>

I want to wire on click #picture event to alert some message so I add

 $(document.ready(function() {
        $("#pictures").click(function(){
            alert('clicked!');               
        });
 })

but this doesnt work, I've got no error messages inside firebug console. Jquery is loaded before correctly.

Answer 1

In your html there is no element with ID pictures , change it, like so

 $("#pictures").click(function(){ alert('clicked!'); }); // or use selector like this, if you can't change html $('a[href="#pictures"').click(function(){ alert('clicked!'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a aria-expanded="false" data-toggle="tab" href="#pictures" id="pictures"> <i class="pink ace-icon fa fa-gift bigger-120"></i> Pictures </a> 

Update:

Also you have error in this line

$(document.ready(function() {

change it

$(function() {
   // put your code
}); 

Answer 2

Did You try tout set the click handler on document?

jQuery(document).on('click',  '#pictures', function(e) {
     alert('clicked');
});

You also have to add :

id="pictures"

In your . Or an y other selector.

Answer 3

If you want to still use the #picture in href check on bellow code

 jQuery(document).ready(function($) {
     $("a[href='#pictures']").click(function(){
         alert('clicked!');   
         return false;            
     });
 })

Answer 4

Try this Demo , even changed some markup for the same.

$(document).ready(function() {
        $("#pictures").click(function(){
            alert('clicked!');               
        });
 })