0

I am trying to remove all extra spaces from large large html table(MVC Razor view) as a IE9 large table bug fix so that it will display correctly on IE9 browser and below is a sample code for that:

  var response_html =$('#section1').html();
       response_html = response_html.replace(/td>\s+<td/g,'td><td'); 
        response_html = response_html.replace(/tr>\s+<tr/g,'tr><tr'); 
        $('#section1').html(response_html);

But after running this piece of code all previously attached DOM events inside table cells( datepicker, checkboxes, textbox events) are NOT working at all. Could you guys please help me to sort out this?

Thanks in advance.
Mik

Mic
  • 111
  • 1
  • 2
  • 9

1 Answers1

0

When you change .innerHTML for a master element (which is what .html(x) does), that recreates all the child DOM elements of that master element. Thus, any event handlers that you had on those elements are now gone because the original DOM elements that the event handlers were attached to have been thrown away.

You basically have three choices for fixing this:

  1. Don't change .innerHTML. Instead incrementally add or remove or modify single DOM elements so large swaths of DOM elements that don't need to change are not recreated.

  2. Recreate your event handlers on the new DOM elements after causing the DOM elements to be recreated.

  3. Use delegated event handling on a parent element that is not itself recreated. That way, the elements that the event handlers are actually attached to are never recreated and thus the event handlers are not lost.

In your specific case, it looks like you're just removing white space between <td> and between <tr> tags. First off, I'd ask why you are even doing that. Do you think it actually makes a difference in how the page renders?

Here are some references on how to do delegated event handling:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • As a additional comment why I am removing spaces from all please refer below links:-https://social.msdn.microsoft.com/Forums/ie/en-US/e6f49d52-ec3f-47c5-802e-b80d1a58ed39/bugie9-skips-cells-when-rendering-large-table-from-ajax-using-jquery?forum=iewebdevelopment

    http://stackoverflow.com/questions/5805956/internet-explorer-9-not-rendering-table-cells-properly     – Mic Mar 13 '15 at 14:35
  • @MickySingh - Go figure. Microsoft can't render HTML with a few extra spaces in it. I hope they have better developers and QA on their new browser than they had on IE6-IE9. – jfriend00 Mar 13 '15 at 14:53
  • @MickySingh - since it looks like you may be fairly new to StackOverflow, are you aware that if you get your question answered, you should check the green checkmark next to the answer that helped you the most. This indicates to the community that your question is now answered and earns both you and the person who provided the answer some reputation points. After you've earned some reputation points, you can upvote (click the up arrow to the left of an answer) all answers that provided help too. – jfriend00 Mar 13 '15 at 14:56