CODEWITHSUNDEEP
javascripthtmldomgoogle-chrome
jpalladino84
jpalladino84

Reputation: 2510

Chrome "onclick" event issue

Okay so I am building an application (for Chrome (*not extension)) and have a bunch of repeated elements on the page. So I decided to build these elements dynamically using a loop, like so:

for(var i = 1; i <= 64; i++){
    var elem = document.createElement('div');
    elem.id = "element"+i;  
    elem.onclick = "doSomething()"
    $("parentElement").appendChild(elem);
}

My issue occurs when it tries to attach my function to the onclick event. When I look at the element there is no onclick attribute on it... Even when I step through I can get to the line:

elem.onclick = "doSomething()"

Then I step again and nothing... So far I have tried with and without quotes and both .onclick and .onClick...

Thank you in advance!

Upvotes: 0

Views: 2152

Answers (2)

Mike
Mike

Reputation: 133

"addEventListener" is a better approach (in case you want to unbind later/bind more events). In addition, I would recommend caching a reference to the parent element, like so

var docFrag = document.createDocumentFragment(),
    elem;
for(var i = 1; i <= 64; i++){
    elem = document.createElement('div');
    elem.id = "element"+i;  
    elem.addEventListener('click', doSomething);
    docFrag.appendChild(elem);
}
$("parentElement").appendChild(docFrag);

Depending on the size of the list, you may consider event delegation:

var docFrag = document.createDocumentFragment(),
    elem,
    parent = $("parentElement");
for(var i = 1; i <= 64; i++){
    elem = document.createElement('div');
    elem.id = "element"+i;
    elem.className = "clickMe";
    docFrag.appendChild(elem);
}
parent.appendChild(docFrag);
parent.addEventListener('click', function( event ) {
    if( event.target.class === 'clickMe' ) {
        doSomething(event);
    }
});

(the class name "clickMe" is completely arbitrary)

Edit: both of these examples fell into the OP's trap of appending to the DOM within a loop. This should be avoided whenever possible, as touching the DOM is expensive. The examples have been updated to instead create a document fragment which is populated and then appended to the parent element. This makes caching a reference to the parent unnecessary in the first example.

Upvotes: 1

pimvdb
pimvdb

Reputation: 154818

You should pass the function itself at all times, not a string of any kind.

elem.onclick = doSomething;

This will set doSomething as the click handler.

  • Using strings will call eval internally, which is slow and possibly unsafe (the latter does not apply here).
  • Passing a function directly is more straight-forward.
  • Strings are only necessary if you set onclick through HTML.

Upvotes: 4

Related Questions