关于javascript onclick的问题

Question

I am creating a link tag (anchor tag) dynamically using javascript . There is a javascript function which will be fired by an event and it will create a javascript link.

I have already mentioned the required attributes for the newly created anchor tag using javascript. Now I have also mentioned an onclick event on that anchor tag.

The problem is

that the onclick event is fired during the anchor tag creation. And it is firing for that one time. Next time when I am clicking on the link, I am unable to get my desired result.

javascript code:

function waybill()
{
    var mail_link = document.createElement("a");
    mail_link.href = "javascript:void(0)";
    mail_link.className = 'animated bounceInDown';
    mail_link.innerHTML = "Mail Waybill";
    mail_link.onclick = abc_test();
    var holder_div = document.getElementById("holder");
    holder_div.appendChild(mail_link);
}
function abc_test()
{
    alert("mail link clicked");
}

I am getting the alert only once and without even clicking. Please help me.

Answer 1

mail_link.onclick = abc_test() will invoke abc_test and assign its return value to mail_link.onclick .

If you just want to reference the function, and not call it, leave out the () :

mail_link.onclick = abc_test;

Adding event listeners is one of those things that a lot of old browsers are doing in their own way, and it's a bit messy to add support for all of them. Sicnce the question is tagged jQuery, you could do all of this in jQuery and have browser support handled for you:

$('<a/>', {
   href: 'javascript:void(0);',
   'class': 'animated bounceInDown',
   text: 'Mail Waybill',
}).appendTo('#holder').click(abc_test);

Answer 2

The problem is that calling abc_test() will execute the function while using only abc_test will pass a reference to the function. in this case you need to change the line:

mail_link.onclick = abc_test();

with the line:

mail_link.onclick = abc_test;

Answer 3

It's because that you've invoked the function instead of referencing it.

---

mail_link.onclick=abc_test(); - This will invoke the function while initializing mail_link.onclick=abc_test; - This will add a reference of the function to onClick, so that it will invoke the function while you click the anchor link.