重新加载jquery选项卡导致重复事件触发
问题描述:
我有一些jquery选项卡,其中一些通过ajax加载。当第一次加载它们都没问题时,事件会根据需要触发一次,但当我点击不同的选项卡然后返回到由ajax加载的选项卡时,jquery事件被触发两次,随后加载该选项卡,添加另一个事件触发器。似乎jquery一次又一次被加载,但是当我检查chrome时,我只能看到它,所以我不知道发生了什么。任何帮助,将不胜感激.. 下面是一个例子..重新加载jquery选项卡导致重复事件触发
outerTabs.jsp
<html>
<head>
<link rel="stylesheet" href="${pageContext.servletContext.contextPath}/resources/css/jquery-ui.css">
<script type="text/javascript" src="${pageContext.servletContext.contextPath}/resources/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.servletContext.contextPath}/resources/js/jquery-ui.js"></script>
<script>var contextPath = "${pageContext.request.contextPath}";</script>
<script type="text/javascript">
$(document).ready(function() {
$("#outerTabs").tabs();
});
</script>
</head>
<body>
<div id="outerTabs">
<ul>
<li><a href="#outerTab1">outerTab1</a></li>
<li><a href="${pageContext.servletContext.contextPath}/getTab2?param=param1">outerTab2</a></li>
</ul>
</div>
<div id="outerTab1"></div>
</body>
</html>
tab2.jsp
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("body").on("click", "#link1", function(e) {
alert("clicked");
});
});
</script>
</head>
<body>
<a id="return">return</a>
<div id="tab1">
<a id="link1">
link1
</a>
</div>
</body>
</html>
控制器
@Controller
public class Controller {
@RequestMapping(value = { "/loadTabs" }, method = RequestMethod.GET)
public ModelAndView loadTabs() {
ModelAndView model = new ModelAndView();
model.setViewName("outerTabs");
return model;
}
@RequestMapping(value = { "/getTab2" }, method = RequestMethod.GET)
public ModelAndView getTab1(@RequestParam("param") String param) {
ModelAndView model = new ModelAndView();
model.addObject("tab2Content", null);
model.setViewName("tab2");
return model;
}
}
所以在这个例子当我加载标签2然后点击回到标签1,然后再次点击标签2时,点击link1 lin k导致警报显示两次。
答
您在每次重新加载时都给元素#link1再次点击事件。您可以使用jquery-lib的http://api.jquery.com/off/来避免第二次提醒。 下面是一个例子:
$(document).ready(function() {
$("#link1").off("click").on("click", function(e) {
alert("clicked");
});
});
答
它没有被加载的JQuery,但事件被重新绑定一遍又一遍。 一种选择是有一个'is-bound'标志。 如:
$("body").on("click", "#link1:not(.is-bound)", function(e) {
alert("clicked");
$(this).addClass('is-bound');
});
这样,如果该元素没有以前绑定的功能才会触发。
你为此欢呼。我不得不限定每次打电话给我的实际项目,因为我在身体上设置了多个呼叫事件,例如,你可以在多个..(“body”)中执行此操作。 off(“click”,“.editVicImage”)。on(“click”,“.editVicImage”,function(){..otherwise你关闭最后一个jquery方法的所有事件。 – user2554194