Jquery click is bounded but not firing on click

Question

I got this piece of code

<div id="boxInformacion" class="alert-box success"><span>some text</span></div>

and in some .js file

var c = $('#boxInformacion');

c.on('click', function(){
    // some code
});

setTimeout(function(){
    c.click();
}, 9999);

(it's a little more complex the function inside click event, so it's simplified)

This code gets executed after an ajax call, on success. The problem is that I click in the div but nothing happens. I put the timeout only for checking that the bind is correct, and yes, after 9 secs the click is fired by javascript and is working. The div #boxInformacion is the only one in all the HTML with that Id.

As the click in the timeout works fine, it seems that is some bug on the manual click. I checked from the console and I'm clicking on the right place. What could I be missing?

I'm clicking on the green bar.

I also tried using c.click(function(){ /* code */}) instead of .on('click', function(){ /* code*/ })

I'm using jQuery 1.10.2

Fiddle here

Answer 1

Your click handler is fine. The problem is your CSS:

z-index:-100;

Due to the negative z-index the click handler will not fire. Remove this and your click handler works.

Updated fiddle

Answer 2

I tested out your code and it works perfectly.

 <script>
 $(document).ready(function(){
     var c = $('#boxInformacion');

     c.on('click', function(){
       alert(1);
     });

  })
 </script>

and this in the body tag

<div id="boxInformacion" class="alert-box success"><span>CLICK</span></div>