jquery的click事件缺陷问题:绑定class了但是在ajax拼接刷新后点击事件不起作用问题的解决办法
程序员文章站
2022-08-31 18:46:49
今天我在制作自己的个人博客的时候,发现了一个jquer的问题,虽然页面在第一次加载时点击事件生效了,但是在点击下一页后,触发function中先是清除掉enter_article对...
今天我在制作自己的个人博客的时候,发现了一个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='<p class="article_item">' + ' <p class="article_title">' + ' <span>['+item.saveBlogContent.blogTopic+']</span>'+ ' <h1 class="enter_article"><a href="#">'+item.saveBlogContent.blogName+'</a></h1>'+ ' </p>'+ '<p class="article_summary">'+item.saveBlogContent.blogSummary+'</p>'+ '<p class="article_visit">' + ' <span>'+createDate+'</span>' + ' <span title="阅读次数">阅读('+item.visitNum+')</span>' + ' <span title="评论次数">评论('+item.commentNum+')</span>' + ' </p>'+ '</p>'; $("#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") } });
下一篇: JsChart组件使用详解