jQuery live click binding issue with IE6/7

  • RockmanTV
  • Proficient
  • Proficient
  • RockmanTV
  • Posts: 348

Post 3+ Months Ago

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.

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?

Code: [ Select ]
// 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;
    });
    //
  1. // AJAX Page Changing
  2.     $("#mContainer a:lt(6),#home a").live("click", function(){
  3.         var clickID = 0;
  4.         var hrefID = $(this).attr("href");
  5.         alert(hrefID);
  6.         switch(hrefID){
  7.             case 'home':
  8.                 clickID = 0;
  9.                 break;
  10.             case 'portfolio':
  11.                 clickID = 1;
  12.                 break;
  13.             case 'resume':
  14.                 clickID = 2;
  15.                 break;
  16.             case 'about':
  17.                 clickID = 3;
  18.                 break;
  19.             case 'contact':
  20.                 clickID = 4;
  21.                 break;
  22.             case 'tutorials':
  23.                 clickID = 5;
  24.                 break;
  25.         }
  26.         $.ajax({
  27.          type: 'POST',
  28.          url: "/includes/pages/"+hrefID+".php",
  29.          data: "ajaxtab=1",
  30.          cache: false,
  31.          success: function(code){
  32.              // Change Tab Image
  33.              var expireDate = new Date(new Date().getTime()+86400000*5); //5 Days
  34.              document.cookie = "soluml="+hrefID+";expires="+expireDate.toGMTString();
  35.              $("#body").fadeTo("fast", 0, function(){$("#body").html(code);});
  36.              $("#body").fadeTo("fast", 1);
  37.              $.post("/includes/topnav.php",{ajaxtab:clickID},function(data){$("#mContainer").html(data)});
  38.          },
  39.          error: function(){
  40.              return true;
  41.          }
  42.         });
  43.         return false;
  44.     });
  45.     //


If you need to see the site live or in context you can do so at the url: http://www.soluml.com. It's not done yet but I'm working on it :(
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Did you get this worked out? Appears the alert's gone from your script, so it's a little hard to tell what's going on.
  • RockmanTV
  • Proficient
  • Proficient
  • RockmanTV
  • Posts: 348

Post 3+ Months Ago

UPSGuy wrote:
Did you get this worked out? Appears the alert's gone from your script, so it's a little hard to tell what's going on.


No I took the alert out as I was working on it. There is a missing semicolon on line 37 (fixed and now on line 38), but that wasn't the issue. I also updated it a little bit (added line 3 to ignore right clicking on the links). Let me re-post the code and re-add the alert. Also, let me know if you need any other alerts added! Someone needs to come out with a Firebug for IE6 :lol:

If you could help me nail this down it'd be great. I can handle IE CSS issues... but IE specific JS issues are so hard to figure out, especially when dealing with a complex framework like jQuery.

Code: [ Select ]
// AJAX Page Changing
    $("#mContainer a:lt(6),#home a").live("click", function(event){
        if(event.button != 0){return true;} // wasn't the left button - ignore
        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").fadeOut("fast", function(){$("#body").html(code);});
             $("#body").fadeIn("fast");
             $.post("/includes/topnav.php",{ajaxtab:clickID},function(data){$("#mContainer").html(data);});
         },
         error: function(){
             return true;
         }
        });
        return false;
    });
    //
  1. // AJAX Page Changing
  2.     $("#mContainer a:lt(6),#home a").live("click", function(event){
  3.         if(event.button != 0){return true;} // wasn't the left button - ignore
  4.         var clickID = 0;
  5.         var hrefID = $(this).attr("href");
  6.         alert(hrefID);
  7.         switch(hrefID){
  8.             case 'home':
  9.                 clickID = 0;
  10.                 break;
  11.             case 'portfolio':
  12.                 clickID = 1;
  13.                 break;
  14.             case 'resume':
  15.                 clickID = 2;
  16.                 break;
  17.             case 'about':
  18.                 clickID = 3;
  19.                 break;
  20.             case 'contact':
  21.                 clickID = 4;
  22.                 break;
  23.             case 'tutorials':
  24.                 clickID = 5;
  25.                 break;
  26.         }
  27.         $.ajax({
  28.          type: 'POST',
  29.          url: "/includes/pages/"+hrefID+".php",
  30.          data: "ajaxtab=1",
  31.          cache: false,
  32.          success: function(code){
  33.              // Change Tab Image
  34.              var expireDate = new Date(new Date().getTime()+86400000*5); //5 Days
  35.              document.cookie = "soluml="+hrefID+";expires="+expireDate.toGMTString();
  36.              $("#body").fadeOut("fast", function(){$("#body").html(code);});
  37.              $("#body").fadeIn("fast");
  38.              $.post("/includes/topnav.php",{ajaxtab:clickID},function(data){$("#mContainer").html(data);});
  39.          },
  40.          error: function(){
  41.              return true;
  42.          }
  43.         });
  44.         return false;
  45.     });
  46.     //
  • RockmanTV
  • Proficient
  • Proficient
  • RockmanTV
  • Posts: 348

Post 3+ Months Ago

It's really weird.. the live event is still some what working otherwise IE6/7 wouldn't alert the second time I click. However, for some reason the href in the links change according to IE6/7 which is why I get the weird results.

Any help would be appreciated!

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 125 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.