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

Answer 1

<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>