2

我正在使用 Visual Studio 2012 创建示例 Windows 8 Phone 应用程序。

从我选择的“创建新项目”选项中，

Windows > Windows Phone HTML5 应用程序

我还在项目中添加了一个 jquery.min.js 文件，如下所示。

在此处输入图像描述

下面是我用 index.html 编写的代码...

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <script type="text/javascript" src="/html/js/jquery.min.js" ></script>
        <title>Windows Phone</title>
        <script type="text/javascript">
          $("#dynamic-box").text("hey !");
        </script>
    </head>
    <body>
        <div>
            <p>MY APPLICATION</p>
        </div>
        <div id="dynamic-box"></div>
    </body>
</html>

但无论我尝试什么，我的 jquery 代码都无法正常工作。是否有其他方法可以在 Windows 8 Phone 应用程序中编写 jquery？

请帮助我。

4

2 回答 2

2

这里发生了两件事，一件是 jQuery，一件是 Windows Phone：

  1. 将您的代码放入准备好的事件中（它不会在网页中按原样工作）

    <script type="text/javascript">
    $(document).ready(function () {
        $("#dynamic-box").text("hey!");
    });
</script>

  2. 在导航到打开页面之前设置IsScriptEnabled 。Browser_Loaded翻转 中的语句顺序MainPage.xaml.cs。 

    private void Browser_Loaded(object sender, RoutedEventArgs e)
{
    // Add your URL here
    Browser.IsScriptEnabled = true;
    Browser.Navigate(new Uri(MainUri, UriKind.Relative));
}
于 2013-01-19T17:25:27.717 回答
1

我最近写了一篇关于这个的帖子，认为在这里分享它很有用......

第 1 步：将 jquery.min.js 添加到解决方案中

在此处输入图像描述

第二步：改变Browser_Loaded方法中的语句顺序，如下图

private void Browser_Loaded(object sender, RoutedEventArgs e)
{
    // Add your URL here
    Browser.IsScriptEnabled = true;
    Browser.Navigate(new Uri(MainUri, UriKind.Relative));
}

第 3 步：示例 Jquery 代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <script type="text/javascript" src="/html/js/jquery.min.js" ></script>
        <title>Windows Phone</title>
      <script type="text/javascript">
        $(document).ready(function () {
          $("#message").text("Welcome !");

          $("#goBtn").click(function(){
            $("#message").text("button has been pressed");
          });
        });
      </script>
    </head>
    <body>
        <div>
            <p>MY APPLICATION</p>
        </div>
        <div id="message"></div>
        <input type="button" id="goBtn" value="press me !" />
    </body>
</html>

输出

在此处输入图像描述

于 2013-01-23T06:09:05.570 回答