jQuery .click（）不会触发

Question

I'm having a secluded problem. I was creating a UI for something using jQuery when all of a sudden the .click() events stopped firing.

This jsFiddle has all of the related code:

http://jsfiddle.net/qgz2j/1/

If you look at the code, you can see that a <div> with id "target" contains two other <div> s, one with id "red" and one with id "green". Looking at the associated CSS, both have width 100% and are overlapped, but the green has display:none; .

As you can see, the .click() doesn't fire and no alert is shown. However, using this works:

<div id="target" onClick="alert('Clicked!')">
    <div id="red"></div>
    <div id="green"></div>
</div>

Thanks for the help!

Answer 1

You chose a wrong framework. Change it From Mootools to jQuery .

Also It is a good practice to wrap your code inside the ready function.

$(function(){     
       $('div#target').click(function() {
            alert('div has been clicked');
        });

});
​ 

Working sample http://jsfiddle.net/qgz2j/4/

Answer 2

现在检查一下，您不附加jQuery库http://jsfiddle.net/qgz2j/3/

Answer 3

In the fiddle, Choose framework as jQuery and it should work. :P

http://jsfiddle.net/qgz2j/6/

Answer 4

Your code is fine you just had your fiddle set to use MooTools instead of jQuery. Take a look at this version:

http://jsfiddle.net/qgz2j/8/

All I did was tell it to use jQuery.