Question

I finished coding my jQuery site but I have found that .live jQuery is not supported with IE9 or in fact any IE.

Or at least that is my experience.

I am wondering how to get IE to do the following

$('ul#mainmenu a li').live('click', function(event){
        //alert(this.id);

        $("li#"+lastpageid).removeClass();
        fetchpage(this.id);


        var text = '';
        $('a li#'+this.id+'').contents().each(function(){
        if(this.nodeType === 3){
         text += this.wholeText;
        }
        });

        $("#largemenutop").html(text);

        $("li#"+this.id).addClass("active");
        lastpageid = this.id;
});

Answer 1

Like others have pointed out make sure your HTML structure makes sense i.e. put the anchor INSIDE the li <li><a href="">blah</a></li> not <a href=""><li>blah</li></a>

<li> is a structured list, doing the above has no structure meaning and isn’t the right way to do things.

If your aim is to have the anchor take up the full with of the list item, then make the anchor a block element in CSS: li a { display: block; }

Anyway, you could try using .delegate in this situation. I’ve restructured your code, I’m assuming fetchpage works as expected.

var $lastAnchor = jQuery();

$('#mainmenu').delegate('a', 'click', function() {
    var $this = $(this);

    $lastAnchor.removeClass('active');

    fetchpage(this.id);

    $('#largemenutop').html(
        $this
          .addClass('active')
          .contents()
          .filter(function() { return this.nodeType == 3; })
          .text()
    );

    $lastAnchor = $this;
});

Ensure it’s all inside $(document).ready(function() { });