15、jQuery事件处理之事件动态绑定使用示例

Sian · 发表于 2016-2-21 12:15:00

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8"/>
        <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
        <style type="text/css">
                html,body{
                        text-align: center;
                        font-size: 20px;
                }
                div{
                        margin: 0 auto;
                        border: 1px solid black;
                }
                #cn{
                        float: left;
                        margin: 50px;
                        width: 420px;
                        height: 340px;
                        line-height: 40px;
                }
                #bj{
                        width: 340px;
                        height: 260px;
                }
                #hd{
                        width: 260px;
                        height: 180px;
                }
                #ppc{
                        width: 180px;
                        height: 95px;
                }
                #usa{
                        float: left;
                        margin: 50px;
                        width: 420px;
                        height: 340px;
                }
                span{
                        display: block;
                }
        </style>
        <script>
        $(document).ready(function(){
                /*
                // 生成一个span，但没有事件
                $('#ppc span').click(function(){
                        $(this).after('<span>Sian</span>');
                });
                // 使用克隆将事件一起复制过来 
                $("#ppc span").click(function(){
                        var obj = $(this).clone(true).text('Sian');
                        $(this).after(obj);
                })
                // 使用live()方法将事件一起绑定到新元素，实际上是把事件委派给Document
                $('#ppc span').live('click', function(){
                        $(this).after('<span>Sian</span');
                });
                // on替代了live方法
                $(document).on('click', '#ppc span', function(){
                        $(this).after('<span>sian</span>');
                });
                // delegate()可做为live()的替代方案，实际上是通过父元素对后代元素事件绑定
                // 使用delegate()首先需要选择父元素
                $('#ppc').delegate('span', 'click', function(){
                        $(this).after('<span>sian</span>');
                });
                // on替代了delegate方法
                $('#ppc').on('click', 'span', function(){
                        $(this).after('<span>sian</span>');
                });
                // 在jQuery1.7以后不建议使用以上事件委派方法，统一使用on() off()
                */
        });
        </script>
</head>
<body>
        <div id="cn">
                <span>中国</span>
                <div id="bj">
                        <span>北京</span>
                        <div id="hd">
                                <span>海淀</span>
                                <div id="ppc"><span>[url=http://www.ppc.com]www.ppc.com[/url]</span></div>
                        </div>
                </div>
        </div>
        <div id="usa">
                <span>美国</span>
        </div>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 15、jQuery事件处理之事件动态绑定使用示例

相关帖子