JQuery error in IE, works with FF. Maybe a problem with live.

Question

Hello.

I have an ASP.net MVC2 application. In wich I'm using JQuery to alter all table rows so I can click anywhere in any row to trigger a click event on a link in the clicked row.

The tables is created using MVC's built in 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=&lt;%: 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 perfectly. In IE, JQuery crashes when I click on a row.

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

Out of stack space

In jquery-1.4.1.js line 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 no eagle at javascript, so I'm pretty much stuck.

Edit: IE had a problem with spaces in my window.open function on the click event. Having fixed that, I can now see that the click event is actualy working, but it enters a Loop. I just keeps clicking on the link until I get the Out of stack space error.

Any thoughts on this?

Answer 1

try:

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

})

scratch that.

looking at your code again, i really think it's the fact that all the rows have the same id. try giving them all theclass aslpink instead of the id. and change the jquery to:

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

})

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

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

is there other tables on the page?

Answer 2

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

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

This should prevent the click event on the anchor tag from bubbling up to the td tag and triggering the click event on the anchor tag again.

Answer 3

Try this:

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

Based on this question, it looks like doing event.stopPropogation(); won't work with live and you'll need to use return false;. I'm not sure why this would be a problem in IE but not Firefox though.

Answer 4

Found a solution.

This 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');                               
            })