...

View Full Version : addevent OnClick!



marisa1
12-13-2006, 07:18 AM
I have the followed javascript which should of work but for some reason it drives me nuts!


<script type="text/javascript" language="Javascript">
<!--
function AjaxLinks(strClass){
var linkList = document.getElementsByTagName('a');
for (var i = 0; i < linkList.length; i++){
var elem=linkList[i];
if (elem.className==strClass) {
var hrf = elem.href;
elem.href = "#";
fn=function(){ alert(hrf); }
if (elem.addEventListener) { elem.addEventListener('click', fn, true); }
else if(elem.attachEvent) { elem.attachEvent('onClick', fn); }
else { elem['onClick']=fn; };
}
}
}

function ShowUrl(sUrl) {
alert(sUrl);
}

window.onLoad = AjaxLinks('ajax');
-->
</script>


Hope I could find a help or a better way to do make easier!

david_kw
12-13-2006, 07:56 AM
Looks like you had a few minor problems that if I recall all had to do with the case of letters. For example, you needed to use:

window.onload instead of window.onLoad

Check out this sample that worked for me in FF2 and IE7.



<html>
<head>
<title>Add Event Test</title>
<script type="text/javascript">
function AjaxLinks(strClass){
var linkList = document.getElementsByTagName('a');
for (var i = 0; i < linkList.length; i++){
var elem=linkList[i];
if (elem.className==strClass) {
var hrf = elem.href;
elem.href = "#";
fn=function(){ alert(hrf); }
if (elem.addEventListener) { elem.addEventListener('click', fn, true); }
else if(elem.attachEvent) { elem.attachEvent('onclick', fn); }
else { elem['onclick']=fn; };
}
}
}

function ShowUrl(sUrl) {
alert(sUrl);
}

window.onload = function () {
AjaxLinks('ajax');
}
</script>
</head>
<body>
<button onclick="AjaxLinks('ajax');">Do it</button>
<a class="ajax" href="http://www.google.com">Link</a>
<div id="adiv"> </div>
</body>
</html>


david_kw

Kor
12-13-2006, 08:18 AM
If you need only to create an onclick event (not to add a new handler to an already existent event), there is no need to use addEventListener and attachEvent methods. The simple DOM 0 cross-browser syntax will do the job. And use a closure (self reference this) to return the element's attributes.


<script type="text/javascript">
function AjaxLinks(strClass){
var linkList = document.getElementsByTagName('a'), i=0, elem
while(elem=linkList[i++]){
if (elem.className==strClass) {
elem.onclick=function(){alert(this.href)}
}
}
}
onload=function(){AjaxLinks('ajax')}
</script>

marisa1
12-13-2006, 08:23 AM
dang! I never thought the letter's case would be the trouble!

Thanks david_kw, it works fine!

marisa1
12-13-2006, 08:37 AM
Thanks Kor, that's awesome but I just put [ShowUrl] just as an example while the url shall be sent to Ajax class so to load the url in a specific element(s)!
So, I made it this way


function ShowUrl(sUrl) {
alert(sUrl.href);
return false;
}
function AjaxLinks(strClass){
var linkList = document.getElementsByTagName('a'), i=0, elem
while(elem=linkList[i++]){
if (elem.className==strClass) {
elem.onclick=function(){ ShowUrl(this); }
}
}
}

but this way the requested url will be loaded once more after the ajax.class done loading it!
So, the url will be loaded twice! any clue?

Kor
12-13-2006, 10:29 AM
try:


elem.onclick=function(){ return ShowUrl(this); }

or:


function ShowUrl(sUrl) {
alert(sUrl.href);
}
function AjaxLinks(strClass){
var linkList = document.getElementsByTagName('a'), i=0, elem
while(elem=linkList[i++]){
if (elem.className==strClass) {
elem.onclick=function(){ ShowUrl(this);return false }
}
}
}


The idea is to achieve, after the function is triggered, a return false onclick, to prevent the HTML action of the href.

marisa1
12-13-2006, 10:51 AM
Thanks again Kor for your help, and yes it works fine now, and better than my old coding.:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum