先实例化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()方法
实例化vue之前赋值html元素导致事件失效
原文地址:http://www.cnblogs.com/taiyonghai/p/7516386.html