JQuery bug in IE, works with FF. Maybe a problem with the living

Question

I have an ASP.net MVC2 application. In which I use jQuery to change all the rows in a table, so I can click anywhere on any row to trigger a click event on a link in the clicked row.

Tables are created using MVC built into partialview ajax.

Here is my jQuery script.

<script type="text/javascript"> $(document).ready(function () { $('table tr').live('click',function (event) { $('#asplink', this).trigger('click'); }) .live('mouseenter',function (event) { this.bgColor = 'lightblue'; }) .live('mouseleave', function (event) { this.bgColor = 'white'; }); }); </script> 

And this is the first part of the partial view code that creates the table.

 <% foreach (var item in Model.JobHeaderData) { %> <tr> <td> <a id="asplink" href="http://localhost/sagstyring/EditJob.asp?JobDataID=<%: item.JobDataId %>&JobNumId=<%: item.JobNumID%>&JobNum=<%: item.JobNumID%>&DepId=1&User_Id=<%:ViewData["UserId"]%>" onclick="window.open(this.href,'Rediger sag <%: item.JobNumID %> ', 'status=0, toolbar=0, location=0, menubar=0, directories=0, resizeable=0, scrollbars=0, width=900, height=700'); return false;">Rediger</a> </td> 

In firefox, this works fine. In IE, jQuery crashes when I click on a string.

If I debug the page in IE. I get it.

 Out of stack space 

On line jquery-1.4.1.js 1822

  // Trigger the event, it is assumed that "handle" is a function var handle = jQuery.data( elem, "handle" ); if ( handle ) { handle.apply( elem, data ); } 

I'm not an eagle in javascript, so I'm pretty stuck.

Edit: IE had a problem with spaces in my window.open function in the click event. Having fixed this, I can now see that the click event really works, but it goes into Loop. I just click on the link until I get the "Stack errors" error.

Any thoughts on this?

Answer 1

Found a solution.

It works.

 $('table tr').live('click', function (event) { window.open(jQuery(this).find(".asplink").attr('href'), 'Edit', 'status=0, toolbar=0, location=0, menubar=0, width=900, height=700'); }) 

Answer 2

Try the following:

 $('table tr').live('click',function (event) { $('#asplink', this).trigger('click'); return false; }) 

Based on this question , it appears that event.stopPropogation(); will not work in real time, and you will need to use return false; . I am not sure why this is a problem in IE, but not Firefox.

Answer 3

to try:

 $('table tr').live('click',function (event) { $(this).find('#asplink').trigger('click'); }) 

scratches that.

looking at your code again, I really believe that all lines have the same identifier. try giving them allclass aslpink instead of id. and change jquery to:

 $('table tr').live('click',function (event) { $(this).find('.asplink').trigger('click'); }) 

hmmmm ok: try giving the strings a unique identifier. something like id='#asplink<%=JobId%>' and use

 $(this).find('.asplink').click(); 

are there any other pages on the page?

Answer 4

If you still have the asplink class in your anchor tags, try adding this code to your document:

 $('a.asplink').live('click', function(event) { event.stopPropogation(); } 

This should prevent the click event on the anchor tag from moving from the td tag and fire the click event on the anchor tag again.