[jQuery] Re: how to streamline my code with Event Delegation?

[Andy Matthews]

It would be more ideal to have some better way to identify each link. For
example, assuming a similar structure:

<div id="linkContainer">
        <a href="">link 01</a>
        <a href="">link 02</a>
</div>

You might have this code:

// all anchor tags inside the linkContainer
$('#linkContainer a').click(function(e){
        // prenvet the default link behaviour
        e.preventDefault();
        // get the text of the link, split on space, return the number
portion
        var target = 'v' + $(this).text().split(' ')[1];
        // run the ajax call
        $.get("myPage.asp",{
                        myVar: target
                },
                function(data) {
                        $('#contentarea').html = data;
                        mySlideEffect();
                }
        );
});

-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of redsun
Sent: Thursday, April 16, 2009 2:29 PM
To: jQuery (English)
Subject: [jQuery] how to streamline my code with Event Delegation?


i'm sure the jQuery i'm using below is very ineffiecient. the only syntax
that changes are the numbers in the names of my IDs and my variables - and
even they're matching. everything else is constant.
i'm told that "event delegation" is the answer, but cant rewrite the code
appropriately (i tried, but just made a mess of things - rookie).

so could someone kindly show me how to streamline the the below with event
delgation.
thanks.

jQuery:

        $('#link01').click(function(){
        $.get("myPage.asp", { myVar: "v01" },
            function(data) {
                document.getElementById('contentarea').innerHTML = data;
                mySlideEffect(); });
                });


        $('#link02').click(function(){
        $.get("myPage.asp", { myVar: "v02" },
            function(data) {
                document.getElementById('contentarea').innerHTML = data;
                mySlideEffect(); });
                });


        .... etc. ...


        $('#link99').click(function(){
        $.get("myPage.asp", { myVar: "v99" },
            function(data) {
                document.getElementById('contentarea').innerHTML = data;
                mySlideEffect(); });
                });


HTML:

<A HREF=# id=link01>page1</A>
<A HREF=# id=link02>page2</A>
... etc ...
<A HREF=# id=link99>page3</A>


<div id="contentarea">
Loaded content slides in with this DIV.
</div>