实例化vue之前赋值html元素导致事件失效

先实例化Vue对象,再操作其他对象,Vue对象声明时会渲染html容器内的所有元素,
会导致元素事件失效或dom元素重新创建,所以涉及html元素的对象都要在实例化Vue之后执行。

下面是简要的例子,还望高手指点,目前猜测是对象赋值后,vue渲染元素将元素进行了改变导致之前的赋值对象变化了,无论是jquery对象还是dom对象都不行。

<div id="vm">
    {{msg}}
    <input type="button" value="试试"/>
</div>
<script>
//添加一下vue、jquery引用

//变量赋值放在这里,无法触发事件
//var colVm=$("#vm");

var testVue=new Vue({
    el:‘vm‘,
    data:{
        msg
    }
});

//变量赋值放在这里,可以触发事件
var colVm=$("#vm");

$(function(){
    colVm.click(function(){
        alert("test");
    });
});
</script>

如果非要将对象赋值放在实例化vue前面那可以使用jquery委托设置事件,亲测可用,.telegate()方法

时间: 2024-10-15 14:57:17

实例化vue之前赋值html元素导致事件失效的相关文章

vue 表格阻止父元素冒泡事件

思路如下:1.给复选框定义一个类型,type="selection" 2.在点击函数中就可以使用判断条件来进行复选框的阻止冒泡.rowDetailShow(row, event, column) {if(column.type !== 'selection') {this.selectedItem = rowthis.detailShow = true}this.tableIndex = row.tableId},这样是一种方法,因为复选框一般都是与表格同步存在的.还有一种简单的方法,

Ajax动态刷新元素js事件失效

工作中遇到一个情况,通过Ajax动态刷新某一区域后,原来绑定在这些dom元素上的js事件就失效了,定位了半天也不知道原因在那,后来查了资料发现动态刷新后的区域Dom元素是重新生成,所以页面之前的js不会动态绑定到新生成的元素上,这怎么解决呢,这里就用到了jQuery的事件委托机制来实现,示例代码如下: jQuery1.7版本以前可以通过live事件委托方式: $(selector).live("click", function(){ // 事件逻辑 }); 1.7版本后jQuery废除

JavaScript之jQuery-10 T-Query(T-Query、基本选择器、T-Query对象、操作方法、创建元素、事件绑定)

一.T-Query DOM 的使用问题 - 在 JavaScript中使用 DOM解析并操作 HTML 元素 - W3C 指定的 DOM 规范不仅适用于解析并操作 HTML 页面,还适用于解析并操作XML文件 - 使用 DOM 解析并操作 HTML页面中元素代码并不简洁 - 如果实现逻辑过于复杂的话,还可能影响 HTML页面的性能 - 我们可以通过自定义的T-Query完成对一些操作的封装,将基本操作进行简化 - T-Query功能大体如下: - 创建$全局对象,并提供工厂函数 - 使用$(ex

JQ 为未来元素添加事件处理器—事件委托

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供了live().dalegate()和on()方法. 事件委托 我们知道,DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒泡到div和body(即document对象).因此

06 同时给多个元素绑定事件

1 要求 同时给多个相同元素绑定相同的时间 例如:给一个无序列表中的每一个li元素绑定一个事件,单击每个li元素的时候改变背景颜色和文本颜色 2 思路 利用jQuery的on()实现同时绑定 3 准备 3.1 jQuery的 on()方法 怎么使用? 在选择元素上绑定一个或多个事件的事件处理函数. on()方法绑定事件处理程序到当前选定的jQuery对象中的元素.在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能.帮助从旧的jQuery事件方法转换,see .bind(

关于怎样用PHP及JS来动态加载html元素及加载的html代码绑定事件失效的解决方法!

首先编写好的html代码放入php文件里面设置请求头格式为text/html 然后呢我将用jquery来操作 先定义一个用了盛放代码的容器 $(function(){}) => window.onload .sn-header-bg 是我用来盛放代码的容器 我的php文件名是header.php放在data目录下! 执行以上代码完成后一个页头就出来了! 加载完成后我在header里面绑定了两个函数,但是全部失效了,原因是没找到对应的dom元素, 根本原因是我没加载完成之前这两个函数就已经执行去寻

如何用js为动态生成的元素绑定事件

今天在开发项目的时候,需要为用js动态生成的元素绑定一个click事件,但是在页面加载之前,这个元素不存在,没法获取这个元素,然后为其添加事件.查阅jquery api 发现可以用on()事件(注意:新版本的jquery已经把live()去除,现在用on()),为动态生产的元素绑定事件,然后触发该事件执行.比如下面一个例子: 假设我们要给div动态添加的span绑定click事件形成如下结果 x //做法如下: ("#choose_result").on("click&quo

js jquery插入元素后事件会被注销

  js jquery插入元素后事件会被注销 document.body.innerHTML += <div id="dd">test</div>  //这个会注销事件 $(document.body).append(str);//使用这个 也可以绑定事件. 例子: //快捷键双击 $(".app_shortcut_item").dblclick(function () { var id = $(this).attr("id&quo

jquery为新增元素添加事件

jquery为新增元素添加事件 默认情况,你使用jquery新增一个元素 ,用class的方法无法绑定事件,需要将绑定的函数放到jquery外面 然后在绑定行内事件 这样就可以绑定了