I'd like to change the value of the onclick
attribute on an anchor. I want to set it to a new string that contains JavaScript. (That string is provided to the client-side JavaScript code by the server, and it can contains whatever you can put in the onclick
attribute in HTML.) Here are a few things I tried:
- Using jQuery
attr("onclick", js)
doesn't work with both Firefox and IE6/7. - Using
setAttribute("onclick", js)
works with Firefox and IE8, but not IE6/7. - Using
onclick = function() { return eval(js); }
doesn't work because you are not allowed to usereturn
is code passed toeval()
.
Anyone has a suggestion on to set the onclick attribute to to make this work for Firefox and IE 6/7/8? Also see below the code I used to test this.
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var js = "alert('B'); return false;";
// Set with JQuery: doesn't work
$("a").attr("onclick", js);
// Set with setAttribute(): at least works with Firefox
//document.getElementById("anchor").setAttribute("onclick", js);
});
</script>
</head>
<body>
<a href="http://www.google.com/" id="anchor" onclick="alert('A'); return false;">Click</a>
</body>
</html>
-
If want to change what happens "onClick" maybe you should bind an click handler instead, and "prevent default" from it?
$("#something").click(function(){ //do your js here return false; });
Alessandro Vernet : The question is: how to I run that js code which I have in a string? I can't do eval(js), because js can contain a "return ..."). -
One gotcha with Jquery is that the click function do not acknowledge the hand coded onclick from the html.
So, you pretty much have to choose. Set up all your handlers in the init function or all of them in html.
The click event in JQuery is the click function $("myelt").click (function ....).
Alessandro Vernet : Tom, I can't use $("myelt").click() here because the code I want to run is in a string. (See my comments to other answers here as well.)Tom Hubbard : Ah. I see how about: function js() { alert('B'); return false; } -
You shouldn't be using
onClick
any more if you are using jQuery. jQuery provides its own methods of attaching and binding events. See.click()
$(document).ready(function(){ var js = "alert('B:' + this.id); return false;"; // create a function from the "js" string var newclick = new Function(js); // clears onclick then sets click using jQuery $("#anchor").attr('onclick', '').click(newclick); });
That should cancel the
onClick
function - and keep your "javascript from a string" as well.The best thing to do would be to remove the
onclick=""
from the<a>
element in the HTML code and switch to using the Unobtrusive method of binding an event to click.You also said:
Using
onclick = function() { return eval(js); }
doesn't work because you are not allowed to use return in code passed to eval().No - it won't, but
onclick = eval("(function(){"+js+"})");
will wrap the 'js' variable in a function enclosure.onclick = new Function(js);
works as well and is a little cleaner to read. (note the capital F) -- see documentation onFunction()
constructors -
just use jQuery bind method !jquery-selector!.bind('event', !fn!);
-
Came up with a quick and dirty fix to this. Just used
<select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>
Hope this helps
Alessandro Vernet : Mmmh... sorry but I don't see how this is answer to the original question. -
If you don't want to actually navigate to a new page you can also have your anchor somewhere on the page like this.
<a id="the_anchor" href="">
And then to assign your string of JavaScript to the the onclick of the anchor, put this somewhere else (i.e. the header, later in the body, whatever):
<script> var js = "alert('I am your string of JavaScript');"; // js is your string of script document.getElementById('the_anchor').href = 'javascript:' + js; </script>
If you have all of this info on the server before sending out the page, then you could also simply place the JavaScript directly in the
href
attribute of the anchor like so:<a href="javascript:alert('I am your script.'); alert('So am I.');">Click me</a>
-
Note that following gnarf's idea you can also do:
var js = "alert('B:' + this.id); return false;";
var newclick = eval("(function(){"+js+"});");
$("a").get(0).onclick = newclick;That will set the onclick without triggering the event (had the same problem here and it took me some time to find out).
-
BTW, without JQuery this could also be done, but obviously it's pretty ugly as it only considers IE/non-IE:
if(isie) tmpobject.setAttribute('onclick',(new Function(tmp.nextSibling.getAttributeNode('onclick').value))); else $(tmpobject).attr('onclick',tmp.nextSibling.attributes[0].value); //this even supposes index
Anyway, just so that people have an overall idea of what can be done, as I'm sure many have stumbled upon this annoyance.
0 comments:
Post a Comment