SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Git-R-Done
    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

  2. #2
    SitePoint Guru
    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.

  3. #3
    Git-R-Done
    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

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    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.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    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;
    }

  6. #6
    SitePoint Guru
    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)

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •