Binding Events rather than using onclick_问答_开发者

Binding Events rather than using onclick

开发者 https://www.devze.com 2023-01-03 13:14 出处：网络

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 debu

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

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

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>