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>

相关阅读:
Spring+redis整合遇到的问题集以及注意事项
 Map源码学习之HashMap
评分---五星好评
 下拉复选框
 倒计时按钮—获取手机验证码按钮
 input上传文件个数控制
 ajax请求完之前的loading加载
 获取浏览器滚动距离
 获取浏览器可视区域宽高
 获取元素尺寸宽高
原文地址：https://www.cnblogs.com/kaituorensheng/p/4566087.html