jquery的click事件缺陷,虽然绑定的class但是在ajax拼接刷新后点击事件竟然不起作用。

今天我在制作自己的个人博客的时候,发现了一个jquer的问题,虽然页面在第一次加载时点击事件生效了,但是在点击下一页后,触发function中先是清除掉enter_article对应的标签,然后重新建了一个enter_article,就在这时候,js点击事件就不起作用了。
所以在用ajax拼接html时,如果有点击事件最好用onclick这样就没什么问题了。

//这里是我拼接的html文本,注意一下里面有一个h1标签的class名称 enter_article
$.each(data.pageContnet,function (i,item) {
                var date=new Date(item.saveBlogContent.createDate);//将时间戳转换成日期
                var createDate=date.toLocaleDateString();
                var html;
                html='<div class="article_item">' +
                    '        <div class="article_title">' +
                    '            <span>['+item.saveBlogContent.blogTopic+']</span>'+
                    '           <h1 class="enter_article"><a href="#">'+item.saveBlogContent.blogName+'</a></h1>'+
                    '       </div>'+
                    '<div class="article_summary">'+item.saveBlogContent.blogSummary+'</div>'+
                    '<div class="article_visit">' +
                    '            <span>'+createDate+'</span>' +
                    '            <span title="阅读次数">阅读('+item.visitNum+')</span>' +
                    '            <span title="评论次数">评论('+item.commentNum+')</span>' +
                    '        </div>'+
                    '</div>';
                    $("#article_list_container").append(html);
            });


   //这里绑定的类 .enter_article 点击事件
   $(".enter_article").bind("click",function () {
            getArticle();
        });

    function getArticle() {
        alert("enter function");
        $.ajax({
            url: './blogArticle',
            type: 'POST',
            dateType: "JSON",
            async: false,
            timeout: 15000,
            data:{
                "blogid":2
            },
            success:function (data) {
                console.log(data);
                var mes = eval("(" + data + ")");
                console.log(mes);
                console.log(mes.saveBlogContent.blogHtml);
                console.log(mes.saveBlogContent.blogName);
                console.log(mes.saveBlogContent.blogTopic);
                console.log(mes.saveBlogContent.createDate);
            },
            error:function () {
                console.log("error")
            }
        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值