jQuery .ajax method in IE7 & IE6 not working but working fine in Firefox

Question

This relates to my previous post:

jQuery .load Method causing page refresh AJAX

I changed my implmentation to use the .ajax method instead of .load and it wo

Answer 1

event is a reserved word in some versions of IE. Try changing the parameter you're capturing from event to something sure to avoid collision, like evt, e.g.:

$('ul#coverTabs > li > a').live('click', function(evt) {

  evt.preventDefault();

  // Find href of current tab
  var $tabValue = $(this).attr('href');

  $.ajax({
    type: "GET",
    cache: false,
    dataType: "html",
    url: $(this).attr('href'),
    success: function(data){

    $(data).find('.benefitWrap').each(function(){

        var $benefitWrap = $(this).html();

        $('.benefitWrap').replaceWith($('
' + $benefitWrap + '
'));

    });

   }

});

Update

Upon further review, I believe your problem is the find(). In this case, you should use filter().

success: function(data) {
  $(data).filter('.benefitWrap').each(function() {
    // This should accomplish the same thing a bit more cleanly.
    $('.benefitWrap').html(this.innerHTML);
  });
}

That can be further refactored down to just:

success: function(data) {
  $('.benefitWrap').html($(data).filter('.benefitWrap').html());
}