html动态生成的代码,如何绑定事件

html-css010

html动态生成的代码,如何绑定事件,第1张

如果使用jQuery,你可以这样写:

// .class为你绑定事件的动态生成的结点

$(document).on('click', '.class', function() {

// 你要绑定的事件在这里

})该方法利用事件冒泡的原理,基本都是这么做的。

在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况:

<div

id="testdiv">

<ul></ul>

</div>

假设我们要给ul动态添加的<li>绑定click事件形成如下结果

<div

id="testdiv">

<ul>

<li

name="apple">apple</li>

<li

name="pear">pear</li>

</ul>

</div>

<script>

function

test(name){

alert("I'm

"+name)

}

//做法如下:

$("#testdiv

ul").on("click","li",

function()

{

//test($(this).attr("name"))

//do

something

here

})

//主动触发某个<li>的click事件

//

$("#testdiv

ul

li[name='apple']").trigger("click")

</script>

以上这篇jquery

html动态添加的元素绑定事件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

很简单,比如你想将这个动态生成的按钮加入到文档并绑定事件,就像下面这样

var btn = document.createElement("input")

btn.type = "button"

btn.value = "test"

btn.onclick = function(){alert("haha")}//绑定click事件

document.body.appendChild(btn)