Question

so I have

<table class="the-table">
<tr>
<td>
<a class="clickthis">YO!</a>
</td>
</tr>
</table>

and then

$('.clickthis').click(function(){
    alert($(this).closest('.the-table').html()); 
    parent = $(this).closest('.the-table');
    alert(parent.html());
    alert($(parent).html());
 });

But then in internet explorer the first alert would alert the table properly, the second alert would return an error that html() is not supported and the third alert would alert null…

on the other hand in Firefox, everything alerts the html properly

how do you go about storing jquery objects in a variable in IE such that you can do the stuff above?

I also tried using parents() instead of closest() but it still didn’t work

Answer 1

Change it to this and it works on IE:

$('.clickthis').click(function(){
    alert($(this).closest('.the-table').html()); 
    var parent = $(this).closest('.the-table');
    alert(parent.html());
    alert($(parent).html());
 });

Apparently, IE has some sort of conflict with a global variable named parent. It works when you make that variable a local variable.

As mu is too short points out, it is probably a conflict with window.parent which IE9 may correctly be making read-only since it isn’t something you are supposed to be able to change.

Yet another reason why implicit global variables (e.g. undeclared variables) are a really, really bad practice.