Ticket #3036 (closed bug: invalid)
click, mouseover and mouseout do not work properly in Firefox
| Reported by: | raresp@… | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.3 |
| Component: | event | Version: | 1.2.6 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
The following code works correctly in Safari but not in Firefox (2.0)
<html>
<head>
<script src="jquery-1.2.6.js"/>
<style type="text/css">
<!--
.highlighted {
background: #FF9;
}
.normal {
background: #FFF;
//-->
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#t1_r1").click(function(e){
alert("x="+e.pageX+", y="+e.pageY);
});
$("#t1_r1").mouseover(function(e){
$(this).addClass("highlighted");
$(this).removeClass("normal");
});
$("#t1_r1").mouseout(function(e){
$(this).addClass("normal");
$(this).removeClass("highlighted");
});
});
</script>
</head>
<body>
<div id="editBar" style="display:none">
<button value="remove" title="remove" onclick="alert('removing');">X</button>
<button value="edit" title="edit" onclick="alert('editing');">E</button>
</div>
<table border="1" width="100%" id="t1">
<thead>
<tr>
<td> Name </td>
<td> Description </td>
<td> Status </td>
<td> Registration date </td>
<td> Memberships </td>
</tr>
<tr>
<td><input name="name.filter"/></td>
<td><input name="description.filter"/></td>
<td><input name="status.filter"/></td>
<td><input name="registration.filter.from"/>
<input name="registration.filter.to"/></td>
<td><input name="memberships.filter"/></td>
</tr>
</thead>
<tbody>
<tr id="t1_r1">
<td id="t1_r1_c1">Jonathan Archer</td>
<td>First captain of Enterprise</td>
<td>Inactive</td>
<td>10/10/2100</td>
<td>Captains, Founders</td>
</tr>
<tr>
<td>James T. Kirk</td>
<td>Captain of Enterprise C</td>
<td>Inactive</td>
<td>10/10/2200</td>
<td>Captains, Founders</td>
</tr>
<tr>
<td>Jean Luc Picard</td>
<td>Captain of Enterprise D</td>
<td>Inactive</td>
<td>10/10/2400</td>
<td>Captains, Founders</td>
</tr>
</tbody>
</table>
<button value="click" title="change" onclick="$('#t1_r1_c1').text('Captain Jack')">blabla</button>
</body>
</html>
Change History
comment:2 Changed 5 years ago by raresp@…
None of the event handlers are called. Therefore, on both Firefox 2.0 and Firefox 3.0 the row backround is not changed and the alert never appears. It works perfectly well in Safari.
One more note. I've noticed using Firebug that the class of the row is changed but somehow this isn't visible in the display....
comment:3 Changed 5 years ago by OLAF
This is running on Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN"
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <script src="jquery-1.2.6.pack.js" type="text/javascript">
</script>
......................
$("#t1r1").click(function(e){
alert("x="+e.pageX+", y="+e.pageY);
}); $("#t1r1").mouseover(function(){
$(this).addClass("highlighted"); $(this).removeClass("normal");
});
$("#t1r1").mouseout(function(){
$(this).addClass("normal"); $(this).removeClass("highlighted");
});
.......
<tr id="t1r1">
<td id="t1r1c1">Jonathan Archer</td>
.......
<button value="click" title="change" onclick="$('#t1r1c1').text('Captain Jack')">blabla</button>
comment:4 Changed 5 years ago by raresp@…
Thank you for your response. I've changed the code replacing the _ from the tag ids but it still doesn't work.
comment:5 Changed 5 years ago by raresp@…
I have also tested in Firefox (2 and 3) on Linux and it still doesn't work.
comment:6 Changed 5 years ago by morgan
If you still have not figured this one out. Close your script tag for the jquery include.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Can you please describe what isn't working properly ? What problem are you experiencing ?