I am attaching onclick event on dynamically created button but the event is not firing.

var ind = location.href.indexOf('/');
function init(){
    alert('h');
}
if(ind != -1){      
    var elem = document.createElement("input"); 
    elem.id ='btnGumb';
    elem.value = 'Select Check box';
    elem.type = 'button';
    elem.style.position = 'fixed';
    elem.style.left = '0px';
    elem.style.top = '0px';

    //this is not working
    elem.setAttribute('onclick', 'init();');

    //but alert is working:   elem.setAttribute('onclick', 'alert("h");');

    document.body.appendChild(elem); 

}

I am attaching onclick event on dynamically created button but the event is not firing.

var ind = location.href.indexOf('http://www.example./');
function init(){
    alert('h');
}
if(ind != -1){      
    var elem = document.createElement("input"); 
    elem.id ='btnGumb';
    elem.value = 'Select Check box';
    elem.type = 'button';
    elem.style.position = 'fixed';
    elem.style.left = '0px';
    elem.style.top = '0px';

    //this is not working
    elem.setAttribute('onclick', 'init();');

    //but alert is working:   elem.setAttribute('onclick', 'alert("h");');

    document.body.appendChild(elem); 

}

• javascript
• greasemonkey

Share Improve this question Follow edited May 14, 2016 at 1:57 Jonathan Eustace 2,4871313 gold badges3434 silver badges5454 bronze badges asked Aug 4, 2010 at 5:57 coure2011coure2011 42.5k8787 gold badges225225 silver badges361361 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Use addEventListener.

elem.addEventListener('click', init, false);

Your init function isn't defined on the content page window, so you can't set the function name as a string.

I haven't worked with GreaseMonkey, but I'm guessing your script is in its own scope and all its variables are released after the script finishes running. Since you're defining init in this scope, but then calling it on the main page, the function is undefined when it's called.

You could put the entire function in the onclick event or trigger a callback:

if (elem.addEventListener) {
  elem.addEventListener('click',init,false);
} else {
  elem.attachEvent('onclick',init);
}

(attachEvent is IE-specific)