为什么在添加jquery mobile之后要两次单击事件绑定?
我正在从事一个MVC web项目,该项目使用为什么在添加jquery mobile之后要两次单击事件绑定?,jquery,jquery-mobile,slidetoggle,page-init,jquery-mobile-collapsible,Jquery,Jquery Mobile,Slidetoggle,Page Init,Jquery Mobile Collapsible,我正在从事一个MVC web项目,该项目使用jquery在单击a标记时切换div。它工作得很好。然后我将jquery.mobile添加到项目中,现在所有的点击事件都会触发两次。我将click事件的处理程序吐到控制台上,看到它绑定了三次,但实际上只触发了两次。我猜jquery和jquery.mobile都是绑定和触发的 以下是HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="u
jquery
在单击a
标记时切换div
。它工作得很好。然后我将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>
仪表板-环境监测系统
仪表板。
显示系统中所有传感器的状态。
$(“#功能标题按钮”)。单击(功能(){
$(“#功能标题”)。滑动切换(“慢速”);
$(“#要素标题加号”).toggle();
$(“#要素标题减”).toggle();
});
内容。
我可能会转而使用
collapsable
和jquery.mobile
一起使用,它工作得很好,但我想了解这个问题,以防止它在将来引发问题。我已经阅读了大量关于使用pageinit
和双重绑定和冒泡等的帖子,但仍然无法诊断和修复我的问题。谢谢。因此,我在最新版本的jquery
和jquery.mobile
中更改了链接,问题就消失了。不确定冲突是什么,但是jquery
1.10.2版和jquery.mobile
1.3.2版在一起更快乐。现在让新版本自动包含在MVC包中
感谢您的评论,它帮助我排除故障并提供了一个健全的检查。这听起来确实像是绑定和启动。您应该进行检查,以便根据用户的浏览器仅加载所需的jQuery。页面上是否有其他代码运行?页面上没有其他代码运行。有一些
CSS
,但这不会有任何效果。这段代码只在jquery
上运行得很好,但在添加jquery.mobile
后,它就开始启动两次。我的主要测试浏览器是Chrome,但它也出现在IE中。想知道本地版本和由jsbin
托管的版本之间有什么区别吗?您是否查看了我链接到的jsbin,我没有检查处理程序,但它似乎只触发了一次。我基本上只是复制了你的代码,去掉了Modernizer脚本。是的,我看到它工作正常。modernizer
会导致问题吗?