关于jquery事件代理问题

在高版本jQuery中,去掉了delegate、bind、live等方法,.on()方法提供绑定事件处理的所有功能。查了一下API文档,要使用事件代理的话,on的语法如下例子:

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});

目前做个项目有这样的需求,即
1、会动态的添加DOM元素,但要保留绑定的事件
2、会使用html()方法改变html代码,但要保留绑定的事件

jQuery代理是否使用于这两种情况呢? 我将按钮的父元素进行事件代理,但发现只有动态添加的元素能保留事件,而改变innerhtml后(我测试了复制清空再粘贴相同的html),事件全部没了,而这是硬需求,怎么解决?

将需求等效为以下的简单例子,比如有如下结构

<body>
    <div class="wrap">
        <div class="wrap2">
            <button></button>
        </div>
    </div>
</body>

我用body代理不成功,而用离button更近的父元素代理能成功。但问题是我需要改变body的innerhtml,如果用wrap代理的话改变innerhtml后事件就失效了。

阅读 6.4k
3 个回答

在body上可以的啊,是不是你写错了,或者可以委托在文档上

<script>
        $(function(){
            $("input").click(function(){
                $("body").append("<button>按钮</button>")
            })
            $(document).on("click","button",function(){
                alert("我可以生效")
            })
        })
    </script>
$(document).on('click','你动态添加的class',function(){
    //内部实现代码
}

document 可以换成你动态添加html的父元素,一直存在的

on是绝对可以的,前提是你真的绑定在了父元素上,我敢跟你赌一根辣条!!!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题