我正在开发一个MVC网络项目,该项目使用jquery
在点击div
标记时切换a
。它工作正常。然后我将jquery.mobile
添加到项目中,现在所有点击事件都会触发两次。我将处理程序的click事件吐出到控制台,看到它绑定了三次,但实际上只触发了两次。我的猜测是jquery
和jquery.mobile
都是绑定和触发。
这是HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dashboard - Environmental Monitoring System</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.3.1.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.3.1.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="body">
<section class="featured" id="feature-header">
<div class="content-wrapper">
<hgroup class="title">
<h1>Dashboard.</h1><br />
<h2>Display the status of all the sensors in the system.</h2>
</hgroup>
</div>
</section>
<section class="content-wrapper main-content clear-fix">
<div>
<a href="#"style="position:relative;left: 6px;top:-6px;text-decoration:none;background-color:none;" id="feature-header-button"><span class="icon-plus" style="display:none;" id="feature-header-plus">▼</span><span class="icon-minus" id="feature-header-minus">▲</span></a>
<script>
$("#feature-header-button").click(function () {
$("#feature-header").slideToggle("slow");
$("#feature-header-plus").toggle();
$("#feature-header-minus").toggle();
});
</script>
<div style="margin-left:75px;">
Content.
</div>
</div>
</section>
</div>
</body>
</html>
我可能会转而使用collapsible
和jquery.mobile
这样的工作正常,但我想了解这个问题,以防止它在将来导致问题。我已经阅读了大量关于使用pageinit
和双重绑定和冒泡等的帖子,但仍然无法诊断和修复我的问题。感谢。
答案 0 :(得分:0)
所以,我改为链接jquery
和jquery.mobile
的最新版本,问题就消失了。不确定冲突是什么,但jquery
版本1.10.2和jquery.mobile
版本1.3.2在一起更快乐。现在让新版本自动包含在MVC包中。
感谢您的评论,这有助于我排除故障并提供健全性检查。