Jquery动态生成DOM 并绑定事件，页面加载时如何触发
刚学习Jquery，自己做了个例子，发现这个问题，很困扰，求大佬帮助。
我通过Jquery 加载XML 数据，然后展现在页面，生成过程中给每个class= '.head ' 的 DIV 绑定click事件，我想页面加载完后触发第一个.head div 的click 事件，也用过window.onload 貌似还是不行，求帮助。 下面是代码。
[color=#FF0000]须加载的XML 文件 Admin_Menu.xml[/color][code=XML] <?xml version= "1.0 " encoding= "utf-8 " ?>
<!--管理员菜单-->
<MENU TITLE= "管理员菜单 ">
<SUBMENU TITLE= "视频管理 ">
<THIRDMENU URL= "# ">
搞笑视频
</THIRDMENU>
<THIRDMENU URL= "# ">
体育视频
</THIRDMENU>
<THIRDMENU URL= "# ">
卡通视频
</THIRDMENU>
<THIRDMENU URL= "# ">
电影视频
</THIRDMENU>
</SUBMENU>
<SUBMENU TITLE= "用户管理 ">
<THIRDMENU URL= "# ">
添加用户
</THIRDMENU>
<THIRDMENU URL= "# ">
用户管理
</THIRDMENU>
</SUBMENU>
<SUBMENU TITLE= "广告管理 ">
<THIRDMENU URL= "# ">
广告分类
</THIRDMENU>
<THIRDMENU URL= "# ">
广告栏目
</THIRDMENU>
<THIRDMENU URL= "# ">
广告维护
</THIRDMENU>
<THIRDMENU URL= "# ">
广告发布
</THIRDMENU>
</SUBMENU>
<SUBMENU TITLE= "系统管理 ">
<THIRDMENU URL= "# ">
权限管理
</THIRDMENU>
<THIRDMENU URL= "# ">
统计信息
</THIRDMENU>
<THIRDMENU URL= "# ">
公告管理
</THIRDMENU>
<THIRDMENU URL= "# ">
公告发布
</THIRDMENU>
</SUBMENU>
</MENU> [/code]
[color=#FF0000]JS 脚本[/color]
[code=JScript]
$(function () {
_tree = $( "#MenuWrapper ");
_tree.empty();
$.get( "../Admin_Menu.xml ", function (result) {
var html = " ";
$(result).find( 'SUBMENU ').each(function (i) {
var html1 = " ";
var _submenu = $(this);
var _title = _submenu.attr( 'TITLE ');
html1 += " <div id=\ " "+i+ "\ " class=\ "head\ "> " + _title + " </div> <div class=\ "content\ "> <div class=\ "greenlight\ "> </div> <ul> ";
_submenu.find( 'THIRDMENU ').each(function () {
var _thirdmenu = $(this);
var _text = _thirdmenu.text();
var _url = _thirdmenu.attr( 'URL ');
html1 += " <li> <a href=\ " " + _url + "\ "> " + _text + " </a> </li> ";
});
html1 += " </ul> </div> ";
html += html1;
});
html += " </div> ";
_tree.append(html);
});
$( ".head ").live( 'click ', function () {
$( ".content ").hide();
$(this).next( ".content ").fadeIn();
})
});
//$(window).load(function () {
// $( '.head:first ').click();
//});
[/code]
[color=#FF0000]原本在window.onload里也试着去触发js函数，貌似没反映。[/color]
[color=#FF0000]HTML 脚本[/color]
[code=HTML] <%@ Page Language= "C# " AutoEventWireup= "true " CodeFile= "Left.aspx.cs " Inherits= "Manager_Left " %>
<!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 runat= "server ">
<title> </title>
<script src= "../Scripts/jquery-1.4.1.min.js " type= "text/javascript "> </script>
<link href= "../Styles/MenuCss.css " rel= "stylesheet " type= "text/css " />
<script src= "../Scripts/LoadMenu.js " type= "text/javascript "> </script>
</head>
<body>
<form id= "form1 " runat= "server ">
<div id= "MenuWrapper ">
</div>
</form>
</body>
</html>
[/code]
动态添加了这个菜单的DOM 结构，给div 添加了click 事件， 如何去触发第一个class=head div 的click 事件呢？
[解决办法]
$(function () {
_tree = $("#MenuWrapper");
_tree.empty();
$.get("../Admin_Menu.xml", function (result) {
var html = "";
$(result).find('SUBMENU').each(function (i) {
var html1 = "";
var _submenu = $(this);
var _title = _submenu.attr('TITLE');
html1 += "<div id=\""+i+"\" class=\"head\">" + _title + "</div><div class=\"content\"><div class=\"greenlight\"></div><ul>";
_submenu.find('THIRDMENU').each(function () {
var _thirdmenu = $(this);
var _text = _thirdmenu.text();
var _url = _thirdmenu.attr('URL');
html1 += "<li><a href=\"" + _url + "\">" + _text + "</a></li>";
});
html1 += "</ul></div>";
html += html1;
});
html += "</div>";
_tree.append(html);
$(".head").live('click', function () {
$(".content").hide();
$(this).next(".content").fadeIn();
}).eq(0).click();
});
});
楼主 试试
[解决办法]
$('div.head').first().click();
