Try looking into using Event Delegation for managing your events. This
means, instead of attaching events to a specific elements (thus, many
attachments and more processing time), you're attaching just a single
event to the parent element and take actions for the children's
events. Here are some links to help:
http://www.learningjquery.com/2008/03/working-with-events-part-1
http://lab.distilldesign.com/event-delegation/
On Feb 12, 10:30 am, zenbaida <zenba...@gmail.com> wrote:
> I have a table that I am parsing with jQuery. The table is used to
> show data related to various objects. It alternates between a row with
> applicable data, and a hidden row that contains other details. The
> main body of the table is built with multiple html blocks like so:
>
> <tr class="text3" valign="top" id="row01">
> <td id="arrow-row01"><div><img
> src="/d-elearn/intranet/inv2/themes/
> default/icons/general/disabled_arrow.png" alt="Detail Toggle Icons
> Column" width="16" height="16" /></div></td>
> <td><div class="inUse">In Use</div></td>
> <td>{some data}</td>
> <td>{more data}</td>
> <td>{data}</td>
> <td>{data}</td>
> <td>{data}</td>
> <td class="optionCell">{Options for data go here}</td>
> </tr>
> <tr id="detail-row01" class="details">
> <td colspan="8">{Bunch of detail stuff goes here</td>
> </tr>
>
> Here is the code that parses the above html:
>
> function setDetail()
> {
> // for the arrow detail toggles
> $('table').find('tr').each(function(i)
> {
> var rowId = $(this).attr('id');
> //if(i < 5) alert(trId.match('detail'));
> if(rowId && !rowId.match('detail'))
> {
> var imageRow = '#' + rowId;
> var imageCellId = '#arrow-' + rowId;
> var imageCellImage = imageCellId + ' div img'; // the
> detail arrow
> icon
> var imageCellDiv = imageCellId + ' div'; // the
> detail arrow icon
> container
> var detailDiv = '#detail-' + rowId;
> $(detailDiv).hide(); // hide the details
> $(imageCellImage).hide();
>
> $(imageCellDiv).addClass('arrowHidden').css({width:'20px',
> height:'18px'}).hover(function()
> {
> if($(imageRow).attr('class') !=
> 'text2')
> {
>
> $(imageRow).attr('class','text4');
>
> $(imageCellDiv).removeClass('arrowHidden');
> }
> else
> {
>
> $(imageCellDiv).removeClass('arrowShow');
> }
>
> $(imageCellDiv).addClass('arrowActive');
> },
> function()
> {
> if($(imageRow).attr('class') !=
> 'text2')
> {
>
> $(imageRow).attr('class','text3');
>
> $(imageCellDiv).removeClass('arrowActive');
>
> $(imageCellDiv).addClass('arrowHidden');
> }
> else
> {
>
> $(imageCellDiv).removeClass('arrowActive');
>
> $(imageCellDiv).addClass('arrowShow');
> }
> }
> ).click(function()
> {
> if($(imageRow).attr('class') ==
> 'text2')
> {
>
> $(imageRow).attr('class','text4');
> $(detailDiv).hide();
> }
> else
> {
>
> $(imageRow).attr('class','text2');
> $(detailDiv).show();
> }
>
> setFooter(); // re-calculate the
> footer possition
> }
> );
> }
> });
>
> }
>
> The table that I have the biggest issue with is the one that has about
> 160 such html blocks (so about 320 total rows). jQuery 1.2.6 goes
> through and parses the table very quickly with no issues. When do the
> same thing using jQuery 1.3.1, it slows way down. It parses about a
> quarter of the table, and then the browser throws a timeout error. If
> I select continue, it will parse about half it did before, and through
> another timeout error, click continue, parses about half of that, time
> out, and on and on. I will have to hit the continue button at least 12
> times to parse the whole table.
>
> I have done some testing to see if I can fix the problem. If I comment
> out the two hide statements and the addclass/hover statement so the
> code is not manipulating the tabel, it speeds way up. It is only when
> I uncomment one statement, and it does not matter which one or the
> number, that it slows way down.
>
> I would like to move up to 1.3.1, but it is not usable to me in its
> current state. If anybody can help me with fixing this, or if future
> versions of jQuery can be fixed (if jQuery is at blame at all), it
> would be much appreciated.
>
> Thanks!
