Javascript onClick() event not working when used dynamically

Question

I'm struggling to make the onclick event listener work in my results. here is my code:

function createLink(text, parentElement) {
        var a = document.createElement('p');
        var linkText = document.createTextNode(text);
        a.appendChild(linkText);
        temp1 = text.replace("/","-");
        temp2 = res1.replace("/","-");
        a.onclick=function(){goMainMenuFromResults();};
        parentElement.appendChild(a);
        var br = document.createElement('br');
        parentElement.appendChild(br);
}

The line in question is:

a.onclick=function(){goMainMenuFromResults();};

The function is present in another section but works in the hardcoded html events. I just can't make it work when its imported into the element in javascript. Any help will be greatly appreciated!

Should be a.onclick(function(){goMainMenuFromResults();}); — aldrin27
– aldrin27, Commented Apr 22, 2016 at 1:15
James, are there any console errors? I assume the new element is appearing. Are you sure this code can reach the goMainMenuFromResults() function? — user1106925
– user1106925, Commented Apr 22, 2016 at 1:26

Marcel Kohls · Accepted Answer · 2016-04-22 01:43:15Z

1

James, it seems to work fine, just a var called res1 was getting error here. Take a look:

temp2 = res1.replace("/","-");

http://jsfiddle.net/MarcelKohls/23tBM/291/

answered Apr 22, 2016 at 1:43

Marcel Kohls

1,89721 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Mallon Over a year ago

Hi thanks so much for pointing this out! it still doesnt link. Is it something to do with my parent? it's got a scroll overflow and positon: absolute I cant think what it could be!

Marcel Kohls Over a year ago

James, did you see the code working on jsfiddle? I believe that the scroll and the position are not the problem. Maybe there is another problem on the code. Send us a sample of the code showing how you are using it, or a sample page, so we can see it.

ManoDestra · Accepted Answer · 2016-04-22 03:27:48Z

0

I removed the lines containing variables that were not defined. I then added a call to preventDefault() on the event raised inside the event handler. And it now works fine. New elements are created and the click handler works on the new elements.

function createLink(text, parentElement) {
    var a = document.createElement('p');
    var linkText = document.createTextNode(text);
    a.appendChild(linkText);
    //temp1 = text.replace("/","-");
    //temp2 = res1.replace("/","-");
    a.onclick = function(e) {
        e.preventDefault();
        goMainMenuFromResults();
    };
    parentElement.appendChild(a);
    var br = document.createElement('br');
    parentElement.appendChild(br);
}

answered Apr 22, 2016 at 3:27

ManoDestra

6,5236 gold badges29 silver badges52 bronze badges

Collectives™ on Stack Overflow

Javascript onClick() event not working when used dynamically

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related