首先是在普通文档(也就是单个html文件中进行测试,能够正常执行)

普通情况下的结果,拼接的结果能够正常渲染并且控制台有输出;

但是在vue环境之下就会出错,点击事件并没有反应,

js部分:

for (const i in _sourcesName) {

let liHtml = "";

for (const j in _sourcesName[i]) {

liHtml += ‘

‘;

liHtml +=

‘ +

_sourcesName[i][j] +

‘(‘ +

_sourcesRoundNum[i][j] +

‘)‘ +

‘;

liHtml += ‘最近更新: ‘ + _sourcesTime[i][j] + ‘‘;

liHtml += ‘

‘;

}

if (i == 0) {

$("#list0").append(liHtml);

} else if (i == 1) {

$("#list1").append(liHtml);

} else if (i == 2) {

$("#list2").append(liHtml);

} else if (i == 3) {

$("#list3").append(liHtml);

} else if (i == 4) {

$("#list4").append(liHtml);

}

}

/**点击li下面的p获取不同表格信息 */

showList() {

console.log("1111");

const _this = this;

// $(".dataLi p").click(function() {

// _this.open3();

// console.log("点击获取列表");

// });

$(".dataLi").on("click","p",function(){

console.log("点击获取列表");

});

// let tabList = $("#tab");

// tabList.css("display", "block");

// this.DQZY=

},

template部分

结果是页面可以渲染,但是事件不会成功,能够进入输出“1111”,但是点击事件没有进入,我觉得应该是渲染的时间问题,目前还没有解决。

原文:https://www.cnblogs.com/zaco/p/12169951.html

拼接的html点击事情不触发,关于在vue中拼接html的问题,点击事件无法执行相关推荐

  1. vue中设置子组件的点击事件不影响父组件的点击事件

    " 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 今天分享个技术块儿. 在做项目的过程中,遇到了个问题,简单的描述一下:有一个card卡片,上面绑定了个点击事件,点击c ...

  2. 在html上点击一张图片时放大照片,网页中图片自动缩小,点击放大(以防页面被撑大)的方法...

    我们在开发动态网站的时候,一般都会在后台让用户添加文章,在添加文章的过程中难免用户会添加一些大的图片,这样,在前台显示的时候图片就会把页面撑的很大,很难看,今天就教大家利用JavaScript函数来实 ...

  3. vue点击事件添加html,vue 中拼接html时添加点击事件

    添加 1111 export default { data() { return { tooltip:"test", }; }, methods: { hahha(){ var i ...

  4. Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)

    场景 speak-tts插件 speak-tts - npm 实现点击按钮触发语音播报,播报指定的文字内容. 为什么不能实现自动语音播报. chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音 ...

  5. Vue中使用a标签实现点击在新标签页中打开实现照片预览

    场景 显示某抓拍系统的照片,在点击该照片后面的预览时,在新标签页中打开图片的网络URL地址. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众 ...

  6. vue中使用双循环v-for及点击切换active,默认使第n个添加active

    效果图 // html 代码// 第一层循环 <dl class="choose-dl" v-for="(value,preindex) in selectArr& ...

  7. 使用vue中的transition标签实现点击缓慢展开,再点缓慢关闭

    <div><div @click="show=!show">我是列表</div><transition name="fade&q ...

  8. vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索

    看到标题,你可能第一反应是想着监听手机键盘的[完成]或[搜索]按钮,然后触发事件do something but ,No No No ,没有那么艰难复杂. vue中,要在手机端点击手机键盘的[完成]或 ...

  9. Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击

    场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...

最新文章

  1. Getting Started with OpenCV
  2. 表单提交对数据进行加密详解(RSA加密)
  3. python前段管理3
  4. docker之容器数据卷
  5. 【技术史】数据中台的前世今生
  6. Win7环境下IPython Notebook的安装
  7. 如何在自己开发的android应用中添加广告
  8. html学习文档-8、HTML 图像
  9. Redux入门教程(快速上手)_day_01
  10. Mybatis-Plus
  11. Windows 10 C盘大瘦身
  12. QT 自定义圆形QLabel 加载圆形图片
  13. python中sys.stdout和sys.stderr
  14. apr dbd mysql.so_mod_dbd
  15. 为什么刹车热了会失灵_急!我的刹车为什么突然不管用了?
  16. 第二十二章 SQL命令 CREATE TRIGGER(二)
  17. 小程序嵌套h5页面_微信小程序内嵌h5页面
  18. (转)oracle中的CURRVAL和NEXTVAL用法
  19. 5.elasticsearch接入
  20. Windows系统截屏有那么多方法,你知道吗?

热门文章

  1. HTML 5 Web 存储-localStorage
  2. 2016年3月16日作业
  3. spring-data-jpa 查询视图
  4. 程序员作图工具和技巧,你 get 了么?
  5. 均胜群英:PC+移动端数字化管理,两年降本7%,人均产值提高300%
  6. 同理qt也一样蜡笔小新
  7. “局域网聊天”开始了
  8. 中文名称:案例编程MOOK系列
  9. 人际关系的55个绝招
  10. 码农回家过个年,真心不容易!