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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
在javascript或者jQuery中绑定按钮点击事件,和在HTML 标签中直接调用onclick属性有什么区别?
RT,做Web开发经常能遇到需要给一个按钮绑定一个点击事件的情况。 例如HTML标签: button type="submit" id="foo">Barbutton> 第一种,如果使用jQuery绑定点击事件的一种做法是: $("#foo").click(function(event) { /* Act on the event */}); 第二种,纯js的做法可以是这
关于JQuery动态添加的html会失去动态效果——(消灭bug①)
问题描述:前端开发中常常会遇到JQ需要给当前部分动态创建、添加元素或者相应HTML代码的情况,我们会给当前部分设置click等事件达到动态效果或者功能实现,但是会发现动态添加的部分失去了相应事件效果。 原因:jquery 中在文档加载完成之后添加进去的的元素是不能直接绑定的,click等事件的注册,在页面加载时就已经完成了,而此时后添加的dom还没有创建完成,所以要用live方法绑定。 例
jQuery动态添加.active 实现导航l栏效果
html:                             @foreach (NavInfo info in WorkContext.NavList)                 {                     @info.Name                 }                 旅游频道                 畅游生活+
JqueryMobile 动态添加内容, 样式没有按照JM的样式展现问题
jquerymobile 动态添加块之后, 样式不是JM内定的样式, 看文档发现需要将这块预处理一下(自己理解), 原语句:The create event is suited for enhancing raw markup that contains one or more widgets $('#message_content').append(html).enhanceWit
JQuery简单实现菜单的点击效果
利用JQuery简单实现菜单的点击打开和关闭<!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
vue2 引入外部JQ
一、添加依赖,在package.json中找到dependencies模块,然后往里面追加jQuery,以jq版本2.2.3为例: "dependencies": { "vue": "^2.3.3", "vue-router": "^2.6.0", "jquery" : "^2.2.3" }, 然后命令行:npm install 二、添加完依赖后,修改webpack配置,找到webpac
利用jQuery load 方法加载HTML公共页面,导航菜单自动选中
最近做了一个纯静态页面的网页,有一些页面的公共部分,不想重复在每一个html 中编写,想用 "header.html" --> ,发现引用不了,不起作用。 后来知道,include是SSI(Server Side Include),在html中不支持include。 查了下资料,看到jQuery的load方法可以引用其他html 页面,用了下,果然很方便。记录一下 公共页面:h
jquery+css+html无限级tree树形菜单(含复选框)
jquery使用,tree树形目录结构,无限级树形目录
jquery结合js实现动态添加内容,并给动态添加的内容添加事件
jquery结合js实现向后台发送请求,给页面动态添加内容,并给动态添加的内容添加事件.html内容如下: &amp;lt;button class=&quot;btn btn-md customButton&quot; id=&quot;add_red_envelope&quot;&amp;gt;添加红包&amp;lt;/button&amp;gt; &amp;lt;div &amp;gt; &amp;lt;la...
动态生成的html绑定click事件没有效果不执行 click事件重复绑定问题
在js里面,click事件是存在重复绑定的情况的,如果你做了 比如说,一个函数会执行多次,你每次都把绑定了click事件,那么他就会累加 点一次相当于点了好几次 还有就是对于动态生成的html如果append到某个div上面 原有的绑定的click事件是不生效的 需要重新绑定 比如我现在遇到的问题: 场景就是手机端的网页,滚动下拉加