[jQuery] jQuery and non-jQuery events
Hi everybody,
I would be very grateful if someone could explain to me behaviour of the following simple piece of code, which is from my perspective a bit strange:
<span style="font-family: courier new,monospace;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"></span>
<br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" ></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"><head></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <title>Untitled Page</title></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"><script type="text/javascript" src="jquery.js"></script></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
<script type="text/javascript"></span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">$(function() {</span>
<br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $('#btn1').click(</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
function() {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> alert('btn1 clicked');</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> );</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> $('#btn3').click(</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> function() {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> alert('btn3 clicked');</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $('#btn1').click();
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $('#btn1').get(0).onclick();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
$('#btn1').get(0).click();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $('#btn2').click();</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> $('#btn2').get(0).onclick();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $('#btn2').get(0).click();
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> );
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">});</span>
<br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">function btn2Click() {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> alert('btn2 clicked');</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">}</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"></script></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></head></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"><body></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <input type="button" id="btn1" value="btn1" />
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <input type="button" id="btn2" value="btn2" onclick="btn2Click()" />
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <input type="button" id="btn3" value="btn3" /></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"></body></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></html></span><br style="font-family: courier new,monospace;">
The same page could be found at:
<a href="http://radioni.ca/jquery-click.html">http://radioni.ca/jquery-click.html</a>
so you can try it out yourselves.
Click on the third button causes following alerts to be displayed:
<ol><li>btn3 clicked</li><li>btn1 clicked</li><li>btn1 clicked</li><li>btn2 clicked</li><li>btn2 clicked</li><li>btn2 clicked</li><li>btn2 clicked</li></ol>Why btn1 only twice, and btn2 even four times? (Note: is behaviour from Firefox, seems like IE behaves slightly different. Let's stay with FF for some time)
Thanks in advance, I am not asking this just for fun, I have problems with submit event and I have created this code to simplify and illustrate.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/