重新加载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导致警报显示两次。

来源

2017-06-06 user2554194

您在每次重新加载时都给元素＃link1再次点击事件。您可以使用jquery-lib的http://api.jquery.com/off/来避免第二次提醒。下面是一个例子：

$(document).ready(function() { 
    $("#link1").off("click").on("click", function(e) { 
     alert("clicked"); 
    }); 
});

来源

2017-06-06 15:04:26 Oliver

你为此欢呼。我不得不限定每次打电话给我的实际项目，因为我在身体上设置了多个呼叫事件，例如，你可以在多个..（“body”）中执行此操作。 off（“click”，“.editVicImage”）。on（“click”，“.editVicImage”，function（）{..otherwise你关闭最后一个jquery方法的所有事件。 – user2554194

它没有被加载的JQuery，但事件被重新绑定一遍又一遍。一种选择是有一个'is-bound'标志。如：

$("body").on("click", "#link1:not(.is-bound)", function(e) { 
     alert("clicked"); 
     $(this).addClass('is-bound'); 
    });

这样，如果该元素没有以前绑定的功能才会触发。

来源

2017-06-06 15:05:23

重新加载jquery选项卡导致重复事件触发

回答

相关问题