How to Programmatically Invoke an Onclick() Event from a Anchor Tag While Keeping the 'This' Reference in the Onclick Function

How can I programmatically invoke an onclick() event from a anchor tag while keeping the ‘this’ reference in the onclick function?

You need to apply the event handler in the context of that element:

var elem = document.getElementById("linkid");
if (typeof elem.onclick == "function") {
    elem.onclick.apply(elem);
}

Otherwise this would reference the context the above code is executed in.

How can an event on an HTML be called from a place other than the event itself

For dynamically generated buttons you can use for example

$("#myButtonId").trigger("click");

over the element

Dynamically create onclick event anchor element - Javascript

a.onclick=myfunction()

Will set the return value of myfunction as onclick. What you want is the following:

a.onclick=myfunction

JavaScript: Invoking click-event of an anchor tag from javascript

If you have jQuery installed then why not just do this:

$('#proxyAnchor')[0].click();

Note that we use [0] to specify the first element. The jQuery selector returns a jQuery instance, and calling click() on that only calls click javascript handler, not the href. Calling click() on the actual element (returned by [0]) will follow the link in an href etc.

See here for an example to illustrate the difference: http://jsfiddle.net/8hyU9/

As to why your original code is not working - it is probably because you are calling onclick, and not onclick(). Without the parenthesis JavaScript will return whatever is assigned to the onclick property, not try to execute it.

Try the following simple example to see what I mean:

var f = function() { return "Hello"; };     
alert(f);
alert(f());

The first will display the actual text of the function, while the second will display the word "Hello" as expected.

Listen to all onClick events from anchor tags that could possibly contain children

All you need to do is "walk up the document tree" from the event.target element until you find an anchor tag.

The advantage of this solution is it utilizes event delegation and can be run at any point in the lifecycle of the page. The document.documentElement property is the <html> tag, and it exists the moment JavaScript begins executing.

function findParentByTagName(element, tagName) {    var parent = element;
    while (parent !== null && parent.tagName !== tagName.toUpperCase()) {        parent = parent.parentNode;    }
    return parent;}
function handleAnchorClick(event) {    event = event || window.event;
    if (findParentByTagName(event.target || event.srcElement, "A")) {        event.preventDefault();        console.log("An anchor was clicked!");    }}
document.documentElement.addEventListener("click", handleAnchorClick, false);

<p>  <a href="#">    <span>      <b>        <i>Click me!</i>      </b>    </span>  </a></p>
<p>  <a href="#">Click me too!</a></p>

How to specify multiple parameters to onClick() in an anchor tag while calling from Ajax?

You need to surround your values in quotes, it's treating your string as a variable.

'<a ... onClick="generateEmail(' + row.case_reference_number + ',\'' + row.customer_care_email + '\')" .../>'

Or, using a template string:

`<a ... onClick="generateEmail(${row.case_reference_number}, ${row.customer_care_email})" .../>`

Invoking event handler doesn't seem to work

coll[i].onclick is null, onclick is an event not a function, so you would like to use click function there.

Not sure what are you trying to achieve by passing coll[i] as this for click function. but try:

coll[i].click.apply()

or simpler:

coll[i].click()