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>

 

posted @ 2015-06-10 15:06  jihite  阅读(9062)  评论(0)  编辑  收藏  举报