js新添加元素无法触发事件，js添加元素的方法

jquery插入元素后,元素的鼠标事件失效的问题。

jquery里为未来元素添加事件的原理很简单，既然这个元素是未来的，那么我们可以把事件绑定在已经存在的元素上，然后在发生点击的时候，再来判断所点击的对象，是否为我们要的对象，然后再触发事件。

alert(Im children)；})这里时，$(#children)这个对象并不存在，程序就会判定为出错，那个这个事件代码就无效了。你应该在动态生成元素的同时也动态生成事件过程，而不是先生成一个子虚乌有的事件来等着元素对号入座。

(function(){ })；的意思是等到所有的DOM元素可用了才执行javascript代码。

并不是事件没有绑定上，是因为点击li的时候先触发了ul的隐藏事件，ul已经被隐藏了所以点击事件无效。

相关问答

Q1: js动态append添加的节点,点击事件无效求教

1、你的点击事件是通过选择器直接绑定的吧，像$(.selector).click这样绑的？这种只能绑定到这一句执行时符合选择器的对象。

2、alert(Im children)；})这里时，$(#children)这个对象并不存在，程序就会判定为出错，那个这个事件代码就无效了。你应该在动态生成元素的同时也动态生成事件过程，而不是先生成一个子虚乌有的事件来等着元素对号入座。

3、代码如下： 测试 我通过$(#test1).append(新添加的元素input type=button value=点击 onclick=alert(1) )； 在test1中增加了新的元素，但是点击按钮，没有任何反应。

4、这个要用到“事件委托”，就是把动态添加的元素的事件委托给它的父元素（非动态的）去处理，这样的话不管其子元素如果动态添加，都能捕捉其事件。

5、(document).on(click，.class，function(){……})；相当于$(.class).live(click，function(){……})；js生成的元素绑定事件必须使用live，但新版的jq，已经淘汰了live，可以用on方法代替，但必须注意写法。

6、而通过ajax获取数据动态创建添加到DOM中的tr标签并没有继承点击事件，点击无任何反应。

Q2: ...元素的时候,发现由ajax添加的数据无法被点击事件响应。请问我该如何...

1、事件是在网页加载的时候都绑定好了，动态添加的tr上其实并没有绑定事件，如果想动态绑定的话可以用live来绑定，live方法用法和bind相同。

2、元素是后加载的，不要直接绑定在元素上，最好绑定在已经加载的父元素上。

3、这个要用到“事件委托”，就是把动态添加的元素的事件委托给它的父元素（非动态的）去处理，这样的话不管其子元素如果动态添加，都能捕捉其事件。

Q3: vue.js中用v-html添加的元素,绑定的事件不起作用

1、解决：用v-html解析html标签 span v-html=item.name/span 不能使用 span{{item.name}}/span 解析，｛｛｝｝只能解析字符串。解决问题是看到的文档，可以看一下。

2、js在特定位置动态添加html可以利用HTML DOM appendChild() 方法。

3、解决这个问题的方法如下：双击打开HBuilder工具，新建静态页面vhtml.html，并引入vue.js文件。在body/body标签元素插入一个div和input输入框标签，添加v-model和v-html指令。

4、题主是否想询问“textareabindfocus不起作用的原因”原因是：没有正确引入Vue.js库、没有正确绑定数据、指令名称写错、代码书写错误。没有正确引入Vue.js库：确保已经正确引入Vue.js库，并在代码中正确使用该指令。

5、是将一个字符串作为HTML代码进行解析，并将其插入到指定元素的内部。-html是Vue.js框架中的一个指令，用于将数据作为HTML动态插入到DOM中。

6、v-on与普通事件绑定不会发生冲突。当使用v-on指令绑定事件处理函数时，Vue.js会自动为元素添加事件监听器，并在事件触发时调用指定的函数。

js新添加元素无法触发事件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js添加元素的方法、js新添加元素无法触发事件的信息别忘了在本站进行查找喔。