使用Template模板引擎后不能为渲染后的dom绑定点击事件

最新推荐文章于 2023-02-17 16:45:11 发布
最新推荐文章于 2023-02-17 16:45:11 发布
阅读量8.2k 收藏 2
点赞数
分类专栏： 需求整理 文章标签： js 前端 web前端 JQuery web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yc950208/article/details/81671272
版权

首先,事件一定要在DOM渲染完成后绑定点击事件,还有一些小细节,在项目中说明:

这是用template渲染一个表格,最后有查看,点击查看获取这一行数据的id,用来获取跳转链接.这里直接在a标签写上onclick事件;;

注意看最下面,注释了一行,这一行是$(function(){})这一页面加载执行函数,一定要注释掉,不然你点查看的时候会报错::这个方法找不到,,并且js不能外联,一定要写页面最下方,用外联的js会失效..

还有函数传的参数是this,传别的不行,this就代表a这个DOM元素,函数里的操作要用原生js,用JQ无效,,这样就可以触发点击事件了

yc950208
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue渲染方式render和template的区别
11-20
render函数详解 Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中 createElement这个函数中有3个参数 第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数 第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类 第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNod
微信小程序 template添加点击事件
热门推荐
wangcheng_的专栏
03-30 2万+
介绍 template是微信小程序提供的模板，可以在模板中定义代码片段，然后在不同的地方调用。 简单使用 定义template 因为项目中可能会需要到不止一个template，所以最好新建一个文件夹来存放template相关的文件。注意这里只是单独的创建各个文件，并不是创建Page或者Component. 创建好之后的文件目录如图： 这里演示一个用template当列表的i...
vue封装的组件如何在调用时绑定click事件
weixin_43169949的博客
08-13 3869
我们在开发中会封装许多的通用的组件，那么如何封装好一个组件时，在调用的时候绑定click事件呢？ 1.child组件 <template> <div class="child" @click="$emit'childClick',123) /> //说明：第一个参数：childClick ，是事件名，在调用的时候需要用到，第二个参数123，是你在调用的时候传...
前端模板字符串中绑定点击事件
weixin_48398799的博客
06-17 2303
let info = `<div class='info'> <div class='info_title'> <img id='info_img' src='https://pic.imgdb.cn/item/60caf1e7844ef46bb2e7146a.png' onclick='clearInfoWindow()'> </div> </div>`; window.clearInfoWindow = function () {
微信小程序 template添加点击事件绑定事件
u013306324的博客
07-19 5829
介绍 template是微信小程序提供的模板，可以在模板中定义代码片段，然后在不同的地方调用。 简单使用 定义template 现在要创建一个template然后再index中使用。因为项目中可能会用到个多个template，所以最好新建一个文件夹来存放template相关的文件。注意这里的.wxml和.wxss文件是单独的创建，并不是创建Page或者Component. 如图： 这...
backbone.js 中view 重新渲染 后 原来 events 里面的事件失效啦
ffwangkun的博客
09-13 865
//定义视图 var AppView = Backbone.View.extend({ tagName: "Div", events: { "click #btnSearch": "onbtnSearchClick" }, initialize: function() { this.model = this.model; this.model.on("chang...
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
10-28
Json2Template.js是一个jQuery插件，其主要功能是将JavaScript对象的数据绑定到HTML模板中，以实现动态数据渲染。这个插件使得开发者可以方便地在前端展示由后端提供的JSON数据，无需繁琐的手动DOM操作。 `...
VUE解决 v-html不能触发点击事件的问题
10-16
这样，即使`<a>`标签是动态插入的，它的点击事件也能被正确处理。 总结来说，Vue.js的`v-html`指令不适合用于处理需要事件监听器的动态内容。通过创建自定义组件并使用Vue的组件系统，我们可以确保动态生成的HTML...
Vue是怎么渲染template内的标签内容的
10-15
总结起来，Vue渲染`template`内的标签内容是通过将模板编译为`render`函数，然后用该函数创建VNodes，最后对比并更新实际DOM来实现的。这一过程允许Vue高效地管理UI，并提供了强大的数据绑定和响应式能力。理解这一...
Jquery 实现grid绑定模板
10-24
这通常需要结合使用模板引擎，如Underscore.js的`_.template`或Handlebars.js等。 要实现jQuery的grid绑定模板，我们可以遵循以下步骤： 1. **准备数据**：首先，你需要一个数据源，这可能是JSON对象数组，每个...
解决Vue中使用keepAlive不缓存问题
10-15
2. `created`: 数据绑定完成后调用，此时组件实例已经被创建，可以访问到`this`，但真实DOM尚未生成。 3. `mounted`: 组件实例挂载到DOM后调用，可以访问到真实DOM。 4. `activated`: 当组件被缓存后再次激活时调用...
关于微信小程序template无法直接绑定事件处理函数的问题
qq_36456827的博客
05-27 3864
当我们需要为template绑定事件处理函数时，是不能在template上直接绑定的，需要为template外层添加一层view标签，在这个外层view标签上绑定事件处理函数，示例代码如下：&lt;view bindtap='yourFunctionName'&gt; &lt;template is='yourTemplate' /&gt; &lt;/view&gt;上述示例代码为templ...
js中的事件委托机制(解决动态生成的dom元素无法绑定事件的问题)
lqx_sunhan的博客
03-05 5728
我们知道，在使用一些插件获取服务器数据然后动态渲染dom元素后，渲染的dom元素是无法绑定事件的,因为我们写的js是在一开始就渲染好了的，所以后面生成的dom是没办法找到的。解决方法:1.生成Dom时把js脚本在写进去一次(舍弃，不可能这么麻烦)2.使用js的事件委托机制.意思是由一个元素监听他的子元素所发生的事件，这样，就算是生成的元素也可以生效.例子:<div style="display: f
不带单选或者复选框的树：某个节点如何自动触发被点击了事件
Yetian_2000的博客
05-13 253
this.zTreeObj.selectNode(this.selectNodes)//这个是必须的，否则不能生效 //null 第一个参数是event //this.option.domName是树id，为字符串 // this.selectNodes 需要被点击的节点 //第4个参数 true 是表示：被点击了，加上选中背景 this.zTreeObj.setting.callback.onClick(null, this.option.domName, this.selectNodes, true
解决原生template标签在Vue中失效的问题
白瑕 的博客
02-17 2733
需要原生Javascript + three.js的数据标注平台加入Vue框架.本来挺顺利的, 我直接在mounted周期做了初始化, 然后剩下的操作还是交给JavaScript文件执行, 最后发现里面有很明显的事件触发问题.
Vue.js 学习笔记（五）模板渲染和事件绑定
qq_44648936的博客
02-28 2828
一、模板渲染 1、条件渲染 v-if、v-else-if和v-else，v-show <!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8"/> <scr
VUE（template标签 事件绑定与监听）
王冉的博客
03-17 1万+
一、template标签 Vue.js提供了template标签，可以将指令作用到这个标签上，对其子元素进行渲染，但最后渲染的结果里不会有它。 二、事件绑定与监听 1.方法与内联语句处理器 1）Vue.js中通过v-on可以绑定实例选项属性methods中的方法作为事件的处理器，v-on:后参数可以接受所有原生的事件名称。 2）v-on:的简写形式，用@代替；除了直接绑定methods函数外，v-...
二级事件art-template模板引擎
小菜鸟的博客
09-23 742
2级DOM事件 在上面的图片里，我们可以看到，在每一个对象的最后一层，它都是一个EventTarget，在这个对象里面，它有下面三个方法 1.addEventListener()：添加事件监听 2.removeEventListener()：移除事件监听 3.dispatchEvent()：派发事件 添加2级事件监听 添加事件监听采用的是addEventListener()这个方法，这个的签名如下 addEventListener( type: "click" | "dblclick",
微信小程序中template点击失效的解决方案
zhouguizhi
11-14 2223
假如我想点击一个列表中的子item跳转到另外一个界面 &lt;import src="posts-item/posts-item-template.wxml" /&gt; &lt;view&gt; &lt;block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx"&gt; &lt;templa
组件的mounted钩子函数中使用$nextTick()方法，等待DOM渲染完毕后再绑定点击事件
最新发布
03-31
在组件的mounted钩子函数中使用$nextTick()方法可以确保组件渲染完成后再执行一些操作，比如绑定点击事件。$nextTick()方法会在DOM更新完毕后执行回调函数，确保在这个时候DOM元素已经渲染完成。 以下是一个示例代码，其中组件在mounted钩子函数中使用$nextTick()方法等待DOM渲染完毕后再绑定点击事件： ``` <template> <button ref="myButton">Click Me</button> </template> <script> export default { mounted() { this.$nextTick(() => { this.$refs.myButton.addEventListener('click', this.handleClick) }) }, methods: { handleClick() { console.log('Button clicked!') } } } </script> ``` 在这个示例代码中，mounted钩子函数中使用$nextTick()方法等待DOM渲染完成后，再通过this.$refs.myButton获取到DOM元素，绑定点击事件并指定回调函数为handleClick()方法。当按钮被点击时，会在控制台中输出“Button clicked!”。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值