zoukankan      html  css  js  c++  java
  • jQuery对新添加的控件添加响应事件

    1. 通过id和类控制

    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    $(document).ready(function(){
            $("#button1").click(function(){
                var val = "<div class='mi'>nihao</div>";
                jQuery("#h").append(val);
                $(".mi").click(function(){
                    $(this).hide();
                });
            });
    });
    
    $(document).ready(function(){
            $("#mi").click(function(){
                $(this).hide();
            });
    });
    </script>
    </head>
    
    <body>
    <div id="h">
    <button id="button1">hihi</button>
    </body>
    </html>

    效果

    初始化

    点击一次

    点击三次

    点击一次“你好”

    2. 通过数组中的值作为id

    2.1 错误思路

    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    var val = ["No1", "No2", "No3", "No4"]
    
    $(document).ready(function(){
            $("#button1").click(function(){
                for (var i = 0; i < val.length; ++i)
                {
                    var tmp = "<div id=" + val[i] + ">nihao</div>";
                    jQuery("#h").append(tmp);
                }
            });
    });
    
    for (var i = 0; i < val.length; ++i)
    {
        $(document).ready(function(){
            $("#" + val[i]).click(function(){
                {
                    $(this).hide();
                }
            });
        });
    }
    
    </script>
    </head>
    
    <body>
    <div id="h">
    <button id="button1">hihi</button>
    </body>
    </html>

    问题在于,一开始并没有id为val列表中的控件,此时初始化事件不行的。

    2.2 改正1——集中处理

    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    var val = ["No1", "No2", "No3", "No4"]
    
    $(document).ready(function(){
            $("#button1").click(function(){
                for (var i = 0; i < val.length; ++i)
                {
                    var tmp = "<div id=" + val[i] + ">nihao</div>";
                    jQuery("#h").append(tmp);
                }
    
                for (var i = 0; i < val.length; ++i)
                {
                    $(document).ready(function(){
                        $("#" + val[i]).click(function(){
                            {
                                $(this).hide();
                            }
                        });
                    });
                }
            });
    });
    
    
    </script>
    </head>
    
    <body>
    <div id="h">
    <button id="button1">hihi</button>
    </body>
    </html>

    :点击一次“hihi”,原因是原来id的控件只是隐藏了,再添加就会有重复的id了。

    2.3 改正2——单独处理

    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    var val = ["No1", "No2", "No3", "No4"]
    
    $(document).ready(function(){
            $("#button1").click(function(){
                for (var i = 0; i < val.length; ++i)
                {
                    var tmp = "<div id=" + val[i] + ">nihao</div>";
                    jQuery("#h").append(tmp);
                    $("#" + val[i]).click(function(){
                        $(this).hide();
                    });
                }
            });
    });
    
    
    </script>
    </head>
    
    <body>
    <div id="h">
    <button id="button1">hihi</button>
    </body>
    </html>

    深入了解jQuery, 有疑问

    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    var val = ["No1", "No2", "No3", "No4"]
    
    $(document).ready(function(){
            $("#button1").click(function(){
                for (var i = 0; i < val.length; ++i)
                {
                    var tmp = "<div class='divclass' id=" + val[i] + ">nihao:" + val[i] + "</div>";
                    jQuery("#h").append(tmp);
                    /*
                    $("#" + val[i]).click(function(){
                        alert(":" + i);
                        $(this).hide();
                    });
                    */
                }
                $(".divclass").on("click", function(){
                        $(".divclass").hide();
                })
            });
    });
    
    
    </script>
    </head>
    
    <body>
    <div id="h">
    <button id="button1">hihi</button>
    </body>
    </html>
  • 相关阅读:
    Summary for sql join in Oracle DB
    Merge data into table in Oracle
    PLSQL存储过程传出大量异常错误信息
    oracle 11g plsql解析json数据示例
    识别'低效执行'的SQL语句
    如何开启MySQL 5.7.12 的二进制日志
    Linux下ps命令详解 Linux下ps命令的详细使用方法
    Linux(Unix)时钟同步ntpd服务配置方法
    MySQL 常用命令总结
    MySQL 数据库通过日志恢复
  • 原文地址:https://www.cnblogs.com/kaituorensheng/p/4566087.html
Copyright © 2011-2022 走看看