Slow loading page due to onclick events in html anchors

Question

We have a strange problem that we are trying to deal with.

We have a web system, and on the page in question there is a table about 600 rows in size. Each line has two options: “lock / unlock” and “edit”, which are implemented as two anchors with onclick events. Onclick events are defined in html and are not jquery related - this is because every javascript call is different based on the post id, for example. unlock (132);

This page takes 10 to 25 seconds to render in Internet Explorer, but in chrome displays instantly. Our customers only support Internet Explorer !: (

This is what I discovered, and I hope someone can explain what is happening, or give some arguments in favor of why the problems arise:

• If I move javascript calls from onclick and place inside href, the page loads instantly - why does it matter?

• If I replace my javascript calls with a warning (''); (still in the onlick attribute) the page loads instantly 2a. So I placed my javascript calls, but replaced the functions with blank stubs, and the page was still loading slowly. Which is strange, because now I do not know what the Internet explorer is doing!

Has anyone heard of anything like this or is there a good explanation for what is happening?

Regards Matthew

Answer 1

, , . , IE6 , . , html.

DOM, . jQuery ( >= v1.4.2), , delegate.

html (: data-id html5 doctype):

<td>
    <a href="#" class="lock" data-id="123">Lock/Unlock</a>
    <a href="#" class="edit" data-id="123">Edit</a>
    ... data ...
</td>   

js click, . , :

$('table').delegate('a', 'click', function() {
    var el = $(this)
        id = el.attr('data-id');

    if (id && el.hasClass('lock')) {
        alert('Lock/unlock ' + id);
        // do stuff...
    }
    if (id && el.hasClass('edit')) {
        alert('Edit ' + id);
        // do stuff...
    }
});

, , . , , , ajax.

:

http://jsfiddle.net/johnhunter/QKYJ5/, . js html script.

Answer 2

, . js, , . HTML js ( ajax , , ). - . IE . inline .

Answer 3

@Matthew , . java script, onclick . IE.

Solution: Use jQuery to bind the onclick event instead of onclick inside the bind tag. U can use regular expressions to search for anchor elements. Use the following code in document.ready () as shown below:

$(document.ready(function(){

$("a[id^=elemID]").click(function(){

//Your call to the javascript function. 

   });

});

This will solve your problem definitely.

Hi