CODEWITHSUNDEEP
javascriptjqueryhtml
Scott Selby
Scott Selby

Reputation: 9570

call onclick attribute programmatically

I have a bunch of <a> tags on a page that look something like

 <a href="#" id="001" onclick="fnaaa();" >...</a>
  ...
 <a href="#" id="002" onclick="fnaba();" >...</a>
  ...
 <a href="#" id="003" onclick="fncda();" >...</a>


 //sometimes maybe like this
 <a href="#" id="004" onclick="fnagg(); return false;" >...</a>
  ...

Now I have the id passed to the page as a query string , so I originally wanted to do something like

$('a[id="' + id + '"]').click();
$('a[id="' + id + '"]').trigger("click");

it turns out both of those are not allowed , so if I have the id , how can I call the function that is written in the onclick attribute? I know I can probably get it like this

var funcToCall = $('a[id="' + id + '"]').attr('onclick');

but how do I call this funcToCall? remembering that funcToCall may be more then just a function name ex. "fnagg(); return false;"

Upvotes: 10

Views: 34056

Answers (5)

Patrick W. McMahon
Patrick W. McMahon

Reputation: 3561

It's best to use addEventListener(). You can add all types of events. example: "click","mousemove" and many more. the false at the end is to stop the event from traversing up the DOM tree. By setting the 3rd property to true the event will continue to traverse the DOM tree so that parent elements will also receive the event. This also makes removing events just as simple as adding events using removeEventListener().

adding event

element.addEventListener(event, function, useCapture)

removing event

element.removeEventListener(event, function, useCapture)

event: Required. A String that specifies the name of the event.

function: Required. Specifies the function to run when the event occurs.

useCapture Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

Possible values:

true - The event handler is executed in the capturing phase

false- Default. The event handler is executed in the bubbling phase

This example requires no JavaScript libraries. This is just plain old JavaScript and will work in every browser with nothing extra needed. 

   <!DOCTYPE html>
    <html>
    <head>
    <title>exampe</title>
    </head>
    <body>
        <a id="test" href="">test</a>
    <script>
        document.getElementById("test").addEventListener("click", function(){
            alert('hello world');
        }, false);
    </script>
    </body>
    </html>

You can read more about this with the following links:

If you would like to use JQuery methods to handle a click event you can do the following.

Using .click()

$("#target").click(function() {
  alert("Handler for .click() called.");
});

More info here: https://api.jquery.com/click/

Using .on()

$("#target").on("click", function() {
  console.log($(this).text());
});

More info here: http://api.jquery.com/on/

Upvotes: -2

thitemple
thitemple

Reputation: 6059

I would do something like this:

For the html

<a href="#" class="dynamicFuncs" id="my001" data-funcName="myFunc">test</a>

And for the javascript

$(document).ready(function(){
    $(".dynamicFuncs").on('click', function(){
        var theFunc = $(this).attr('data-funcName');
        window[theFunc]();
    })
});

var myFunc = function() {
    alert('me');
};

Upvotes: 0

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

DEMO

function fnagg()
{
    alert('fired');
}
$(function(){
    eval("var funcToCall=function(){"+$('#004').attr("onclick")+"}");
funcToCall();
});

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

You are using onclick attribute to bind the handler. Try like below,

document.getElementById(id).click();

DEMO: http://jsfiddle.net/kpvKG/

Upvotes: 6

Josh Stodola
Josh Stodola

Reputation: 82483

First of all, the ID attribute has some restrictions, one being that it must start with a letter. After you fix that, I would recommend not using an inline onclick handler.

$("#ID_HERE").click(function(e) {
  fnaaa();
  e.preventDefault();
});

Then you can trigger it easily:

$("#ID_HERE").triggerHandler("click");

However, if you absolutely must use the ugly onclick, you can invoke it like this:

<a id="foo" href="#" onclick="alert('test');">Test</a>
var el = document.getElementById('foo');
el.onclick();

Upvotes: 10

Related Questions