jQuery live click binding issue with IE6/7

Question

I have an issue in IE6/7 where they ignore the live binding of elements. I can't seem to find any solutions to this issue, and I really need both IE6 and 7 support (fixing one should fix the other anyway). The first click of my elements works as intended but afterwords the binding goes away and I can't get it to work. This does not happen in IE8 or any other current browsers.

Here's my code. As you can see, on line 5 I am alerting the hrefID variable. After the first click hrefID clearly shows me that the binding disappears as it prints an href that's totally different.

Can anyone help?

// AJAX Page Changing
$("#mContainer a:lt(6),#home a").live("click", function(){
    var clickID = 0;
    var hrefID = $(this).attr("href");
    alert(hrefID);
    switch(hrefID){
        case 'home':
            clickID = 0;
            break;
        case 'portfolio':
            clickID = 1;
            break;
        case 'resume':
            clickID = 2;
            break;
        case 'about':
            clickID = 3;
            break;
        case 'contact':
            clickID = 4;
            break;
        case 'tutorials':
            clickID = 5;
            break;
    }
    $.ajax({
      type: 'POST',
      url: "/includes/pages/"+hrefID+".php",
      data: "ajaxtab=1",
      cache: false,
      success: function(code){
          // Change Tab Image
          var expireDate = new Date(new Date().getTime()+86400000*5); //5 Days
          document.cookie = "soluml="+hrefID+";expires="+expireDate.toGMTString();
          $("#body").fadeTo("fast", 0, function(){$("#body").html(code);});
          $("#body").fadeTo("fast", 1);
          $.post("/includes/topnav.php",{ajaxtab:clickID},function(data){$("#mContainer").html(data)});
      },
      error: function(){
          return true;
      }
    });
    return false;
});
//

Answer 1

I'm not 100% sure if this is the problem, but JSLint is squawking about a missing semi-colon. Older IEs are a lot less forgiving that modern browsers, so I'd give that a shot first. I highly doubt the problem is live itself.

This:

$.post("/includes/topnav.php",{ajaxtab:clickID},function(data){$("#mContainer").html(data)});

Should be:

$.post("/includes/topnav.php",{ajaxtab:clickID},function(data){$("#mContainer").html(data);});

REF: http://jslint.com/

Problem at line 36 character 101: Missing semicolon.

Answer 2

Are you using jquery-1.4? important change to .live are available only since jquery-1.4.

maybe you can try this, it use event.target instead of this:

// AJAX Page Changing
$("#mContainer a:lt(6),#home a").live("click", function(e){
    var clickID = 0;
    var hrefID = $(e.target).attr("href");
    alert(hrefID);
    switch(hrefID){
        case 'home':
            clickID = 0;
            break;
        case 'portfolio':
            clickID = 1;
            break;
        case 'resume':
            clickID = 2;
            break;
        case 'about':
            clickID = 3;
            break;
        case 'contact':
            clickID = 4;
            break;
        case 'tutorials':
            clickID = 5;
            break;
    }
    $.ajax({
      type: 'POST',
      url: "/includes/pages/"+hrefID+".php",
      data: "ajaxtab=1",
      cache: false,
      success: function(code){
          // Change Tab Image
          var expireDate = new Date(new Date().getTime()+86400000*5); //5 Days
          document.cookie = "soluml="+hrefID+";expires="+expireDate.toGMTString();
          $("#body").fadeTo("fast", 0, function(){$("#body").html(code);});
          $("#body").fadeTo("fast", 1);
          $.post("/includes/topnav.php",{ajaxtab:clickID},function(data){$("#mContainer").html(data)});
      },
      error: function(){
          return true;
      }
    });
    return false;
});
//