SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Apr 3, 2007, 15:53 #1
- Join Date
- Nov 2001
- Posts
- 1,194
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How to set a trigger with a class?
I need to set a trigger in my links using a class so whenever a link with this class is clicked, a function would be performed. Can someone tell me how to do this?
John Saunders
-
Apr 3, 2007, 16:14 #2
- Join Date
- Apr 2006
- Posts
- 802
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Cross browser (IE as well as the other browsers):
1. After the document loads, collect all the link elements with the classname and assign the function to each one.
2. When you create any new links with this class, assign the handler.
-
Apr 3, 2007, 16:36 #3
- Join Date
- Nov 2001
- Posts
- 1,194
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sounds easy, but could you give me an example with some code? Do you use getAttribute?
John Saunders
-
Apr 3, 2007, 17:18 #4
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You could use something like xGetElementsByClassName, or as mrhoo pointed out the most cross-browser way would be to loop through the "document.links" array (as done here) and use the RegExp as used in xGetElementsByClassName.
Cross-Browser.com, Home of the X Library
-
Apr 3, 2007, 18:12 #5
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
Mike, why the regexp and not just split(' ')? I'm curious because I wrote these for myself and they seem to work quite well:
Code:function getElementsByClassName(c) { var all = document.getElementsByTagName('*'); var els = []; for (var i = 0; i < all.length; i++) { if (isInClass(all[i], c)) els.push(all[i]); } return els; } function isInClass(el, c) { var itis = false; if (!el.className.length) return false; var bits = el.className.split(' '); for (var j = 0; j < bits.length; j++) { if (bits[j] === c) itis = true; } return itis; }
-
Apr 3, 2007, 21:02 #6
- Join Date
- Apr 2006
- Posts
- 802
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
function funforClass(wotTag,classN,fun,pa){
var who;
if(!wotTag) wotTag= '*';
if(!pa) pa= document.body;
var A= pa.getElementsByTagName(wotTag);
classN=RegExp('\\b'+classN+'\\b');
if(typeof(fun)=='function'){
var i=0;
while(A[i]){
who=A[i++];
if( !who.className || classN.test(who.className)==false) continue;
addEvent(who,'click',fun)
}
}
}
//the next bit is in case you dont have an addEvent function
function addEvent(hoo,wot,fun){
if(hoo.attachEvent) hoo.attachEvent('on'+ wot,fun);
else if(hoo.addEventListener) hoo.addEventListener(wot,fun,false);
}
//this is a test function
var fun1=function(e){
if(e)alert(e.target.href);
else if(window.event)alert(event.srcElement.href);
}
//insert your own class name string and try it
funforClass('A','classname',fun1)
-
Apr 3, 2007, 21:08 #7
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Raffles,
I can't see why it wouldn't work just as well as you have it. I'm not sure why I originally went with the RE. It would be interesting to do some tests to see which is more efficient.Cross-Browser.com, Home of the X Library
Bookmarks