Question

我被告知最好将事件绑定到元素，而不是让onclick具有函数。我同意这一点，因为它更多地来自HTML，这意味着更清晰，更容易调试代码。

但我这样做有困难！我用PHP循环一些数据（见下文），我目前使用onclick来调用一个函数。如何使用JQuery将此onclick事件绑定到许多元素。

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

感谢大家的帮助

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>

Answer 2

你可以iterate over a group of divs or lis or whatever with JQuery。

下面的代码没有显示php，它使用警报来显示JQery发生了什么......我评论了实际代码是什么......希望它有所帮助。像这样你不必担心id，因为项目的顺序是重要的。你当然可以留下ids。

编辑 - 添加了如何处理自定义键

案例1：数字键

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

案例2：您选择的自定义键

如果您的密钥都是数字，您可能希望在前面粘贴一个任意字母，以便验证id或类名。

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

绑定事件而不是使用onclick

2 个答案: