2 liuqiang6667 liuqiang6667 于 2016.03.12 23:19 提问

菜鸟求解答,用jquery动态添加的html菜单没有直接在页面里加的点击效果???

图片说明
图片说明图片说明
在html里加console打出来的代码菜单是可以有伸缩效果的,但是用js动态添加不行

4个回答

showbo
showbo   Ds   Rxr 2016.03.13 11:55
已采纳

添加html代码到dom后绑定点击的事件代码要重新执行一次,要不找不到对象

liuqiang6667
liuqiang6667   2016.03.12 23:42
var basePathPix="<%=basePath%>"; var menuJSON =[ { "id":"1", "pid":"0", "name":"统计管理", "href":"#", "child":[{ "id":"2", "pid":"1", "name":"统计图表", "href":"adminindex", "child":[]}, { "id":"2", "pid":"1", "name":"统计", "href":"adminindex", "child":[]}]}, { "id":"3", "pid":"0", "name":"专业管理", "href":"#", "child":[]} ]; $(function(){ $("#main-nav ul li a").click(function() { $("#main-nav ul li a").removeClass("current"); $(this).addClass("current"); }) $(".nav-top-item").click(function() { $(".nav-top-item").removeClass("current"); $(this).addClass("current"); }) // initMenu(); getMenu(menuJSON); function getMenu(menu_list){ var $menu = $("#main-nav"); var menuhtml =""; for (var menu in menu_list) { if(menu_list[menu].child.length > 0){ menuhtml+= "<li><a href=\""+menu_list[menu].href+"\" class=\"nav-top-item\">"+menu_list[menu].name+"</a><ul>"; for(var menuc in menu_list[menu].child){ menuhtml+="<li><a href=\""+menu_list[menu].child[menuc].href+ "\" target=\"main\">"+menu_list[menu].child[menuc].name+"</a></li>"; } } else{ menuhtml+= "<li><a href=\""+menu_list[menu].href+"\" class=\"nav-top-item \">"+menu_list[menu].name+"</a><ul>"; } menuhtml+="</ul></li>" } // alert(menuhtml); console.log(menuhtml); $menu.append(menuhtml); } });
Ty_o_yT
Ty_o_yT   2016.03.12 23:53

动态生成的元素不能直接绑定方法,要用委托实现绑定

Ty_o_yT
Ty_o_yT 回复liuqiang6667: $(document).delegate("要绑定的元素","绑定的方法名",function(){ 方法体 });
接近 2 年之前 回复
liuqiang6667
liuqiang6667 可以举个例子吗,谢谢了
接近 2 年之前 回复
u010319440
u010319440   2016.03.13 00:03

$("new dom").bind("click",function()
{
//your function
});

u010319440
u010319440 这个语句在你新加节点的代码下面执行,“new dom”是选择器,能选到你新加的元素
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!