IBM Worklight - jQuery 无法识别 html 页面上的任何元素
Posted
技术标签:
【中文标题】IBM Worklight - jQuery 无法识别 html 页面上的任何元素【英文标题】：IBM Worklight - jQuery not recognizing any element on html page 【发布时间】：2014-01-05 18:22:50 【问题描述】：我一直试图在 html 页面中单击按钮时调用一个函数，但不知何故，正在调用 .js 文件中定义的函数，但我无法对 HTML 页面中定义的任何元素执行工作。 jQuery 没有访问我的任何元素。我尝试阅读很多内容并尝试不同的组合，但似乎没有任何效果。
我创建了一个名为“Hello”的新 IBM Worklight 项目。因此，当我在Hello.html 中添加上述 HTML 内容并在Hello.js 中添加上述 JS 代码时，代码运行良好。但是当我在同一个项目中创建一个新的UI.html 和control.js 并且如上所述的相应内容时，代码不起作用......
这是我的 HTML 代码：
<body>
<div id="AppBody">
<div id="header">
<h1>UI Controls</h1>
</div>
<div id="wrapper">
<input type="button" id='SimpleDialogStartButton' value="SimpleDialog" onclick="w()" />
<input type="button" id='BusyIndicatorStartButton' value="BusyIndicator for 5 seconds" onclick="w()" />
<br />
</div>
</div>
<script src="js/control.js"></script>
</body>
这是我的control.js：
var busyIndicator = null;
function w()
// alert("bvgb");
busyIndicator = new WL.BusyIndicator(
text: "LOADING..."
,
color: "RED"
);
$('#SimpleDialogStartButton').click(simpleDialogDemo);
$('#BusyIndicatorStartButton').click(busyIndicatorDemo);
function busyIndicatorDemo()
alert("fdsddsds");
busyIndicator.show();
setTimeout(function ()
busyIndicator.hide();
, 5000);
function simpleDialogDemo()
var dialogTitle = "CommonControls";
var dialogText = "This is simple dialog text";
WL.SimpleDialog.show(dialogTitle, dialogText, [
text: 'I am button 1',
handler: simpleDialogButton1Click
,
text: 'I am button 2',
handler: simpleDialogButton2Click
function simpleDialogButton1Click()
alert("simpleDialogButton1 Clicked");
function simpleDialogButton2Click()
alert("simpleDialogButton2 Clicked");
即使我尝试在上面的函数 w() 中添加这一行
$("#p1").css("border","3px solid red");
和
<p id='p1'>kjbdsds</p>
在我的 HTML 代码中，仍然没有任何效果。
【问题讨论】：
这些方法是否在 document.ready 中被调用？？ 否，但如果我在 w() 函数中取消注释 alert("")，则会调用 alert，但其余代码似乎不起作用 你应该在 document.ready 中调用这些，因为只有这样 dom 元素肯定存在，然后你才能访问它们。您是否收到任何控制台错误？您在哪里调用 w()？ 如果你创建了一个 jsFiddle 会很有帮助 我在按钮单击 SimpleDialogStartButton 和 BusyIndicatorStart 按钮时调用 w() 并且 $document.ready 也不起作用。当我将此代码与名为 Hello 的 ibm worklight 项目的主 html 和 js 文件一起使用时，上面的代码工作得非常好，即当我在 Hello.html nd hello.js 中编写内容时，这工作正常，但如果我是创建一个新的 Html 和 js 文件代码不起作用 【参考方案1】：IMO，您需要停下来做所有事情，然后完成 IBM Worklight 为您提供的培训模块：http://www.ibm.com/developerworks/mobile/worklight/getting-started.html
这样您就会明白Worklight 是一个单页应用程序。您不能简单地在应用程序中包含更多 HTML 文件并期望它们能够正常工作。
此外，正如您所提到的，jQuery (v1.9.1) 与 Worklight 捆绑在一起。您在主 HTML 和 JS 文件（在 Worklight Studio 中创建新项目和应用程序时自动生成的文件）中正确执行的任何操作都将有效。
当您创建一个 new HTML 文件并将其应用到问题中提到的这些更改时 - 它不起作用，因为其中没有引用 jQuery 或 Worklight 框架文件，所以它只是一些单独的 HTML 文件，没有连接到任何东西。
例如，如果您要从应用程序的主 HTML 文件加载这个新的 HTML 文件，您将丢失 Worklight 上下文并且应用程序将停止工作。
您的 Worklight 应用程序中的 HTML 文件不能超过 1 个。
但是！如果您要做的是创建具有多个页面的应用程序，那么我再次建议您查看文档，因为也有专门的培训模块（见下文） .
培训模块：http://www.ibm.com/developerworks/mobile/worklight/getting-started.html
Building a multi-page application Working with UI frameworks【讨论】：
+1 我说实话stop everything you are doing, and then you need to study the training modules
您是否刚刚删除了此处的其他答案，包括其下的所有 cmets？那是糟糕的形式。仅仅因为那个答案/cmets 是错误的，并不意味着你可以随意删除它们。如果我有足够的声誉，我会否决你的回答。
@trysis，删除其他人的答案？我不是这个网站的版主，所以我不能这样做，但如果你愿意，请继续投票。 o_O
好的，谢谢你，虽然我只关注这个网站，但我会在通过这个之后回来，但也许我跳过了一些重要的点
即使我也没有删除任何人的答案以上是关于IBM Worklight - jQuery 无法识别 html 页面上的任何元素的主要内容，如果未能解决你的问题，请参考以下文章
IBM Worklight 6.0.0.1 - jQuery 调色板不显示
jQuery (IBM Worklight) 页面导航和后退按钮
IBM Worklight 6.0 - 富页面编辑器不加载 jQuery Mobile CSS
IBM Worklight 6.0 - 默认情况下是不是包含 jQuery Mobile？