Jquery 库不能与 sencha touch 一起使用？
Posted
技术标签:
【中文标题】Jquery 库不能与 sencha touch 一起使用？【英文标题】：Jquery library not working with sencha touch? 【发布时间】：2012-10-17 09:39:55 【问题描述】：我目前正在构建一个基于 Sencha Touch 2 的移动应用程序。 目前我只是在尝试一些实验，看看 Sencha 也有什么能力。
今天我遇到了一件看起来很奇怪的事情——我只是想试试是否可以将 jQuery 库用于我的应用程序并使用它的附加功能。
最奇怪的是，我在制作 jquery 函数时无法得到任何响应。
我已将 jquery 库和我的脚本包含在我的 sencha 目录中的 index.html 文件中，并且我只是制作了一个简单的愚蠢测试脚本，看看它是否有效 - 但当我这样做时我根本没有任何反应在浏览器中试用。我可以看到该库和脚本是通过 firebug 包含的。（如您所见，我的 jquery 测试只是一个简单的单击事件，应该显示一个 div，但它不是）。
我是不是很愚蠢 - 或者我在这里错过了什么？
这是我的 index.html 文件
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>scroller</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
$("#show_me").click(function ()
$('#magic').slideDown('slow');
);
);
</script>
<link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css">
<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body
height: 100%;
background-color: #1985D0
#appLoadingIndicator
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
#appLoadingIndicator > *
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
@-webkit-keyframes appLoadingIndicator
0%
opacity: 0.8
50%
opacity: 0
100%
opacity: 0.8
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
<!-- script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script--->
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
<!--<script type="text/javascript" src="app.js"></script>-->
<script type="text/javascript" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/phonegap_shortcuts.js"></script>
<script type="text/javascript" src="js/maps.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/filters.js"></script>
<script type="text/javascript" src="js/proxy.js"></script>
<!--<script type="text/javascript" src="js/index.js"></script>-->
<!--
<script type="text/javascript">
document.addEventListener("deviceready", app.mainLaunch, false);
</script>
-->
<script type="text/javascript">
function onDeviceReady()
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
function PictureSourceType() ;
PictureSourceType.PHOTO_LIBRARY = 0;
PictureSourceType.CAMERA = 1;
//var ja = phonegap.shortcuts.getLocation();
//console.log('ja:'+ja);
document.addEventListener("deviceready", onDeviceReady, false);
</script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
【问题讨论】：
我认为它们应该是兼容的 - 我真的不明白为什么它不能真正工作，因为我正在做一个如此简单的 jquery 调用 我认为当你被 Sencha 困住时最好寻求帮助，而不是试图让它与 jQuery 一起工作。这两个框架都很重，而且做的事情几乎一样。 也许——但我需要从 jquery 库中获取一些基本的小东西来完成这项工作。 【参考方案1】：也许您正在点击的元素没有 id 'showme'。发生这种情况是因为您创建的按钮在 Sencha 中具有 id 'showme'，但实际呈现的 HTML 包含另一个 id。
如果这是真的（当然，你可以使用 FireBug 来检查），你可能想监听按钮上的 'tap' 事件，而不是使用 jQuery 绑定到 'click' 事件。有关文档，请参阅 http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap。
可以将 jQuery 与 Sencha 一起使用，但重要的是要记住，Sencha 中的组件并不是 DOM 中元素的直接表示，Sencha 中的某些组件在渲染时由多个 DOM 元素组成。
希望对你有帮助
【讨论】：
以上是关于Jquery 库不能与 sencha touch 一起使用？的主要内容，如果未能解决你的问题，请参考以下文章