jquery为不存在的元素动态添加事件

最新推荐文章于 2020-09-08 22:18:29 发布

原创最新推荐文章于 2020-09-08 22:18:29 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jQuery #JQUERY #Jquery #JQuery #js动态事件绑定

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一段代码实现对长文本进行查看全部与隐藏功能的方法，包括隐藏文本的显示和隐藏操作，以及对应的事件绑定。

直接看例子代码吧，下面这个是用来对一段较长的文字做查看全部和隐藏功能的代码

if(jQuery(".product-view .box-description .std").length){
    //alert(jQuery(".product-view .box-description .std").text().substr(0,5));
    var std=jQuery(".product-view .box-description .std");
    var stdNormalLength=123;
    var stdStr=std.text().toString();
    var subStr=stdStr.subStr(0,stdNormalLength)+'......';
    std.text(subStr);
    
    var more=document.createElement("div");
    more.innerHTML='<span class="more-std">显示更多</span>';
    
    std.parent().append(more);
    
    jQuery(".product-view .box-description .more-std").die().live("click",function(){
        std.text(stdStr);
        jQuery(this).text("隐藏");
        jQuery(this).attr("class","less-std");
    });
    
    jQuery(".product-view .box-description .less-std").die().live("click",function(){
        std.text(subStr);
        jQuery(this).text("显示更多");
        jQuery(this).attr("class","more-std");
    });
    
}

其中die()是删除事件绑定，live是添加事件绑定