jquery 绑定 动态html标签事件

可以这样理解,无论HTML内容是不是JS生成的,只要没有跨域,所有页面内的元素都属于这个页面,都能够绑定事件,JS中有个非常重要的概念叫事件冒泡,简单来讲,就是子元素产生的事件,会一直冒泡到最顶级父元素,并能够被父元素监测到。请看下图:

技术分享

事件冒泡

那么,我能不能在被插入元素的父元素上监测冒泡产生的事件,并回调相应的函数呢?答案是当然是肯定的。来看下面的例子,注意网页面里插入内容是在JS代码的最后。

复制代码

    <script>
    $(function(){
     $("body").delegate("p","click",function(){
        console.log("Click Event");
     })
    $("<p>这是生成的内容</p>").appendTo("body");
    })
    </script>

复制代码

这是,发现所有的P元素点击都产生了输出,说明代码运行成功。这里我们用到了jQuery的delegate函数,来看一下官方解释:

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
根据特定的根元素,把一个或者多个事件注册到指定的元素上,不论这个元素现在是否存在。

在jQuery1.7.3以上的版本中,on方法也可以做这件事,官方有示例说明,这里不再赘述。

比如有一些情况多次从后台获取动态内容到前台,点击的时候会触发多次,还要使用  $("body").undelegate();  解除之前的绑定 然后再一次重新绑定。

1

2

3

4

$("body").undelegate();

$("body").delegate(".reply_check_btn""click"function () {

    alert('adsadsa');

});

猜你喜欢

转载自blog.csdn.net/ymxkybqw/article/details/84987892
今日推荐