Binding Events rather than using onclick

Question

I have been told its better to bind events to elements rather than having onclicks with functions everywhere. I agree with this as it devolves more from the HTML which means cleaner and easier to debug code.

But I am having trouble doing this! I loop through some data with PHP (see below) and I currently use onclick to call a function. How can I bind this onclick event to many elements using JQuery.

<?php foreach($main_tags as $key=>$value){ ?>
<li>
    <a id="<?php echo $key; ?>" href="#" onclick="tag_search('<?php echo $key; ?>'); return false;">
    <?php echo $key; ?>
        <span class="num-active">
            <?php echo $value; ?>
        </span>
    </a>
</li>
<?php } ?>

Thanks all for any help

I think you should provide a fall-back solution when JavaScript is turned off. href="#" leads to nothing. — Marcel Korpel
– Marcel Korpel, Commented Jun 13, 2010 at 20:17
@Marcel - I don't want any users who do not have JS to even bother visiting my site. A bit cruel, but it must be so because of the nature of this app. — Abs
– Abs, Commented Jun 13, 2010 at 20:19

meder omuraliev · Accepted Answer · 2010-06-13 20:19:24Z

2

<ul id="container">
<?php foreach($main_tags as $key=>$value){ ?>
<li>
    <a href="#" key="<?php echo $key;?>">
    <?php echo $key; ?>
        <span class="num-active">
            <?php echo $value; ?>
        </span>
    </a>
</li>
<?php } ?> 
</div>
<script>
$(function() {

function tag_search(){};

$('#container a').click(function(e) {
e.preventDefault();
tag_search.call( this, $(this).attr('key') );
});

});
</script>

answered Jun 13, 2010 at 20:19

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abs Over a year ago

Ah I see! I was concentrating on doing something within the loop but fearing that the JS code will also be duplicated. But I can just use a broad selector! Thank you meder! :)

Matt Huggins Over a year ago

To make it better suited to XHTML standards, I would change the attribute key to data-key, and then change the corresponding JS from $(this).attr('key') to $(this).attr('data-key').

meder omuraliev Over a year ago

@Matt - Godamn, I knew someone was gonna mention that sooner or later. Name it as you wish, same concept though.

Peter Ajtai · Accepted Answer · 2010-06-13 21:07:57Z

1

You can iterate over a group of divs or lis or whatever with JQuery.

The code below doesn't show the php, and it uses alerts to show what's going on with the JQery... I commented what would be the actual code.... hope it helps. Like this you don't have to worry about ids, since the order of items is what's important. You could of course leave the ids in.

Edit - added how to handle custom keys

Case 1: Numerical keys

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Binding events</title>
        <script type="text/javascript" src="JQUERY-PATH/jquery-1.4.2.min.js"></script>
        <meta charset="utf-8" />
        <script type="text/javascript">  
                        // When the page is ready ==================================================
            $(document).ready(function()
            {
                $('li').each(function(index) 
                {
                    // The line below would read something like:
                    // $(this).click( function () {tag_search(index)});
                    $(this).click( function() { alert("This would trigger => tag_search(" + index + ")")});                    
                });
            });
        </script>
    </head>
    <body>
        The php goes into the unordered list:
        <ul>
            <li>zero</li>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
        </ul>
    </body>
</html>

Case 2: Custom keys of your choice

If you have keys that are all numbers, you may want to stick an arbitrary letter in front, so that it validates for id or class names.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Binding events</title>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <meta charset="utf-8" />
        <script type="text/javascript">  
            // When the page is ready ==================================================
            $(document).ready(function()
            {
                $('li').each(function(index) 
                {
                    // The line below would read something like:
                    // $(this).click( function () {tag_search($(this).attr('id'))});
                    $(this).click( function() { alert("This would trigger => tag_search(" + $(this).attr('id') + ")")});                    
                });
            });
        </script>
    </head>
    <body>
        The php goes into the unordered list:
        The custom keys are placed in ids or classes:
        <ul>
            <li id="Roger">zero</li>
            <li id="Dodger">one</li>
            <li id="23884">two</li>
            <li id="Fubar">three</li>
            <li id="Gungho">four</li>
            <li id="Burlap">five</li>
        </ul>
    </body>
</html>

edited Jun 13, 2010 at 21:07

answered Jun 13, 2010 at 20:29

Peter Ajtai

57.8k13 gold badges124 silver badges143 bronze badges

5 Comments

Abs Over a year ago

This is an interesting method. So the benefit looks like PHP will do a bit less work and JQuery will be given some responsibility to do some work. Meaning slightly faster page loads? Is this similar to what meder's code is doing?

meder omuraliev Over a year ago

That's why I asked what key was - I wasnt sure if it was just 0,1,2 or custom keys.

Abs Over a year ago

@Meder - no key is not incremental, its an id specific to that tag. It can be 123, 34, 456. No order. Btw, I didn't see your comment about what key was.

Peter Ajtai Over a year ago

You can also use this sort of method for custom keys... I added in case 2 to show how.

meder omuraliev Over a year ago

@Abs - ok, then my solution should be ideal. Peter's second part is the same as my original solution except semantically its better to keep it as its own attribute because class can have multiple values.

Collectives™ on Stack Overflow

Binding Events rather than using onclick

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related