87,839
社区成员
发帖
与我相关
我的任务
分享请教on方法绑定事件失败原因
$("nav")是已有元素，$(".menuP>a")是未来元素，如下代码，经测试是成功的：
改写成这样，就失效了：
但是书上例子是使用$(selector).on(event,function)的写法却是成功的，已经通过浏览器验证了，请教一下，为啥我这样写不行呢？
以下是完整代码（删除了一些与本问题无关的代码，可能会有语法错误，可以忽略语法错误）：
$("nav").on("click", ".menuP>a", function () { //一级菜单单击事件
$(this).next('ul').slideToggle();
}).on("click", ".menuC>a", function () { //二级菜单单击事件
//somecode
});改写成这样，就失效了：
$(".menuP>a").on("click", function () { //一级菜单单击事件
$(this).next('ul').slideToggle();
});
$(".menuC>a").on("click", function () { //二级菜单单击事件
//somecode
});但是书上例子是使用$(selector).on(event,function)的写法却是成功的，已经通过浏览器验证了，请教一下，为啥我这样写不行呢？
以下是完整代码（删除了一些与本问题无关的代码，可能会有语法错误，可以忽略语法错误）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="main" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>纬尚尼POS系统</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<style type="text/css">
/*导航栏 导航栏 导航栏*/
nav {
position: absolute;
width: 9em;
margin: 0.2em;
border: 1px solid red;
overflow: auto;
}
.menuP a:link, .menuP a:visited {
display: block;
text-decoration: none;
color: blue;
padding: 0.25em;
}
.menuP a:hover, .menuP a:active {
background-color: gainsboro;
}
.menuP {
margin-left: 0.25em;
}
.menuC {
margin-left: 1em;
}
ul {
list-style-type: none;
}
ul span {
display: none;
}
</style>
<script>
$(document).ready(function () {
//获取菜单
$.post(
"UserManage/UserPost.aspx",
{
action: "getMenuJSON",
},
function (result) {
if (result == "-1") {
alert("会话已过期，请重新登录");
self.location = "Login.aspx";
}
if (result == "-2") {
alert("参数出错，请联系管理员");
return false;
}
var showList = $("<ul></ul>");
showAll(JSON.parse(result).MenuP, showList);
$("nav").append(showList); //将菜单添加到导航区
}
);
$(".menuP>a").on("click", function () { //一级菜单单击事件
$(this).next('ul').slideToggle();
});
$(".menuC>a").on("click", function () { //二级菜单单击事件
//检测是否存在，存在就显示，不存在则检测数量
var temti = -1;
for (var i = 1; i < $(".text").length; i++) {
if ($(".text").eq(i).text() == $(this).text()) {
temti = i;
break;
};
};
if (temti != -1) {
ti = temti;
showtabs();
} else {
testcount($(this).text(), $(this).prev().text());
};
});
//生成菜单列表
function showAll(menuJSON, parent) {
$.each(menuJSON, function (index, fatherLi) { //遍历数据集
var li = $("<li class='menuP'> <a href='#'>" + fatherLi.Pname + "</a></li>");
var ul = $("<ul><ul>");
$.each(fatherLi.MenuC, function (i, child) {
var lic = $("<li class='menuC'><span>" + child.Url + "</span><a href='#'>" + child.Cname + "</a></li>");
$(ul).append(lic);
})
$(li).append(ul);
$(parent).append(li);
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<nav>
</nav>
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
winzond 2018-06-07
- 打赏
- 举报
书上的例子是先建了一个隐藏的模版，然后clone模版appendTo($("div"))里的，明白了，clone是带事件处理器的，所以书上成功了。而我的是ajax来的，处理on时，ajax还没回来数据，更不要说生成元素了，所以失败了。
ambit_tsai-微信 2018-06-07
- 打赏
- 举报
很显然，第一种事件是绑定在nav上，.menuP>a是触发事件时过滤用的。第二种是想绑定在.menuP>a上，然而a元素还不存在，所以绑定失败。
天际的海浪 2018-06-06
- 打赏
- 举报
第一种是委托式绑定事件，这种方式可以为未来创建的元素绑定事件。
第二种是直接式绑定事件，这种方式只能为on()方法执行时已经存在的元素绑定事件。不能对之后（异步执行的函数中）创建的元素绑定事件。
书上例子也肯定是在on()方法执行时需要绑定事件的元素已经存在了、或者是在新创建元素时单独为这个新元素重新绑定一次事件
