请教:给DOM结构绑定内容后立即触发事件 你可以直接把事件写在 li上 <li onclick='alert("ss");'></li> 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script>$(function(){ var li=$("<li>xxxx</li>");li.appendTo($("ul"));li.click(function(){alert("pppppp");});li.trigger("click");})</script></head><body><ul></ul></body></html> 有一种 叫做事件委托的机制, 就是把事件绑定在ul上,但是出发条件是li。 这样即使你绑定事件的时候 页面中没有li,后面才生成的li,li也能监听到事件。jQuery 提供的 live bind 方法 都是使用这种机制的。如果是用原生的js demo:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <style> </style> </head> <body> <h1>Javascript书籍</h1> <ul id="list"> <li>Javascript基础教程</li> <li>Javascript权威指南(第五版)</li> <li>Javascript高级程序设计</li> <li>Javascript核心技术</li> <li>Javascript语言精粹</li> <li>高性能Javascript</li> <li>Javascript DOM设计</li> </ul> <script> document.getElementById('list').addEventListener('click',handler,false); function handler(e){ var x = e.target; if(x.nodeName.toLowerCase() === 'li'){ alert(x.innerHTML); } }; </script> </body> </html> 这里的li 如果你是用 innerHTML 插入进去的 ,同样会有点击事件。 我做了一个测试,发现还可以,应该有更简洁的办法,非常感谢楼上几位。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style>.active{ color:#00c; font-size:2em; line-height:1.6; } </style></head><body> <a id="add" href="#">add data</a> <ul id="list"></ul> <script>var add=document.querySelector("#add");var list=document.querySelector("#list");var arry=["javascript","html5","css3","ux","ui","design","development"];var html="";add.onclick=function(){ for(var i=0;i<6;i++){ html+="<li>"+(i+1)+": "+arry[i]+"</li>"; } list.innerHTML=html;};list.onclick=function(e){ var target=e.target; console.log(target.innerHTML); target.classList.toggle("active");};</script></body></html> 一个焦点图(就是网站图片轮换的),怎么把鼠标事件由点击改为滑过。(内附原代码) JS函数注册提交问题 javascript写在页面中和JS文件引用有什么区别? javascript语法问题 不知道该怎么提问? 想把做导航固定,不要随着滚动条被拉动,有什么好办法? 表格的打印预览问题 将一个1M以上的文本信息用js逐行追加到textarea中怎样效率最快 请教!获取json数据的方法 URL怎么选定型号和颜色? 深入理解JavaScript闭包概念 var json=JSON.parse(inResult);json的值false是什么意思
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var li=$("<li>xxxx</li>");
li.appendTo($("ul"));
li.click(function(){alert("pppppp");});
li.trigger("click");
})
</script></head><body>
<ul></ul>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
</style>
</head>
<body>
<h1>Javascript书籍</h1>
<ul id="list">
<li>Javascript基础教程</li>
<li>Javascript权威指南(第五版)</li>
<li>Javascript高级程序设计</li>
<li>Javascript核心技术</li>
<li>Javascript语言精粹</li>
<li>高性能Javascript</li>
<li>Javascript DOM设计</li>
</ul>
<script>
document.getElementById('list').addEventListener('click',handler,false);
function handler(e){
var x = e.target;
if(x.nodeName.toLowerCase() === 'li'){
alert(x.innerHTML);
}
};
</script>
</body>
</html> 这里的li 如果你是用 innerHTML 插入进去的 ,同样会有点击事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.active{ color:#00c; font-size:2em; line-height:1.6; }
</style>
</head>
<body>
<a id="add" href="#">add data</a>
<ul id="list"></ul>
<script>
var add=document.querySelector("#add");
var list=document.querySelector("#list");
var arry=["javascript","html5","css3","ux","ui","design","development"];
var html="";
add.onclick=function(){
for(var i=0;i<6;i++){
html+="<li>"+(i+1)+": "+arry[i]+"</li>";
}
list.innerHTML=html;
};
list.onclick=function(e){
var target=e.target;
console.log(target.innerHTML);
target.classList.toggle("active");
};
</script>
</body>
</html>