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>
复制代码

 











本文转自jihite博客园博客,原文链接:http://www.cnblogs.com/kaituorensheng/p/4566087.html,如需转载请自行联系原作者


相关文章
|
5月前
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
34 1
|
22天前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
14 0
|
2月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
JavaScript
jQuery 事件
jQuery 事件
37 10
|
2月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
33 3
|
2月前
|
JavaScript 前端开发 UED
jQuery日历控件与假日显示
【9月更文挑战第1天】
|
2月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
15 0
|
3月前
|
Web App开发 JavaScript Android开发
重载jquery on方法实现click事件在移动端的快速响应
重载jquery on方法实现click事件在移动端的快速响应
|
4月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
4月前
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)