Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    349
    Thanks
    2
    Thanked 0 Times in 0 Posts

    how to use Bind() for multiple links on page (event handler)

    Hello,

    I am working on a project that takes links on a page (Not all, depends on if they are Merchandise links or partner links), and passes some parameters to a tracking js call.

    The problem is, I don't want to put 'onclicks" on every href as there could be a hundred on a page and many of the links are dynamically generated on the backend.

    So, I was thinking of creating a function that took in parameters from each of the links that are pressed. But I was told "bind" is a good way to do this, but to be honest - it is very confusing to me.

    How would I do this?

    Lets say we have two links (there will be many more, but for an example sake).
    Code:
     
    <a href="somelink.html" id="linka">link a</a>
    <javascript>
        var cu = new Linktracker({
        dispPrice: 30,
        dispTitle: 'Manager',
        dispProduct: 'Red Shoes'
    });
    $('linka').observe('click',
    cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct')
    );
    </script>
    
    <a href="somelink.html" id="linkb">link b</a>
    <javascript>
        var cu = new Linktracker({
        dispPrice: 10,
        dispTitle: 'casual',
        dispProduct: 'Blue Shoes'
    });
    $('linkb').observe('click',
    cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct')
    );
    </script>
    How does any particular click know I am referencing the correct "var cu"?
    Can something like this be done?
    Code:
     
    <a href="somelink.html" id="linkc">link c</a>
    <javascript>
    
    $('linka').observe('click',(
    var cu = new Linktracker({
        dispPrice: 30,
        dispTitle: 'Manager',
        dispProduct: 'Red Shoes'
    });
    )
    cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct')
    );
    </script>
    What am I missing here? Should I use just "bind" or "bindAsEventListener"?

    Since each link on the page is unique and will pass different values, what is the best way to do this without putting "onclicks" on every link?

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,276
    Thanks
    10
    Thanked 581 Times in 562 Posts
    bind would put onclick events on every link, is that what you want or not?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    349
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    bind would put onclick events on every link, is that what you want or not?
    Not "every" link, but most on a page. I am new to "bind" and how it works. I am not even sure the syntax above is valid. I am just delving into prototype and bind and I am finding it difficult to grasp, at this initial stage.

    I am looking to find out how to use something practical given the examples I provided.

    The actual function will fire some tracking js supplied by a third party company.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,276
    Thanks
    10
    Thanked 581 Times in 562 Posts
    i would aim to keep all the data in one place.
    i sketched out a sime

    Code:
    var data={
     linka: {
        dispPrice: 30,
        dispTitle: 'Manager',
        dispProduct: 'Red Shoes'
    }, linkb: {
        dispPrice: 10,
        dispTitle: 'casual',
        dispProduct: 'Blue Shoes'
    }
    };
    
    $$("a").filter(function(){return a.id && data[a.id];}).map(function(a,b){
            a.onclick=(new Linktracker(data[a.id])).updateSomeFunc.bindAsEventListener();
        }
    });
    you place all the data in an object, key'd by the id of the associated link.
    the last part scans all <A> tags and filters out the ones whose id has an associated data entry.

    since i'm not familiar with it, i haven't tested the exact syntax of the Linktracker call/binding, but the above pattern should help simply your project's code.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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