......">
Geek Answers Handbook

Soft call the onclick attribute

I have a bunch of <a> tags on a page that looks 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 an identifier 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 that both of them are not allowed, so if I have an id, how can I call a function written in the onclick attribute? I know that I can probably do it like this.

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

but how can I call this funcToCall? remembering that funcToCall can be more than just an ex function name. "fnagg (); return false;"

+7
source share
5 answers

First of all, the ID attribute has some limitations , one of which is that it must begin with a letter. Once you fix this, I would recommend not using the onclick built-in handler.

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

Then you can easily call it:

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

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

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

The onclick attribute is used to bind the handler. Try for example below

 document.getElementById(id).click();

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

+4
source

Demo

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

I would do something like this:

For html

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

And for javascript

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

It is best to use addEventListener () . You can add all types of events. example: click, mouse move, and more. a false at the end means that the event should not go up the DOM tree. If the 3rd property is set to true, the event will continue to traverse the DOM tree so that the parent elements also receive the event. It also makes removing events as easy as adding events with removeEventListener () .

add event

 element.addEventListener(event, function, useCapture)

delete event

 element.removeEventListener(event, function, useCapture)

event: required. A string that indicates the name of the event.

function: required. Defines the function that is triggered when an event occurs.

useCapture Optional. A logical value that indicates whether the event should be performed in the capture phase or in the bubble phase.

Possible values:

true - an event handler is executed at the capture stage

false - by default. The event handler runs in the bubble phase.

This example does not require JavaScript libraries. This is just old JavaScript, and it will work in any browser without requiring anything extra.

  <!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 at the following links:

If you want to use jQuery methods to handle the click event, you can do the following.

Using .click ()

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

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

Using .on ()

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

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

-2
source

More articles:


All Articles