Question

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

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

Windows＆gt; Windows Phone HTML5应用程序

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

enter image description here

以下是我在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吗？

请帮我解决这个问题。

Answer 1

这里有两件事，一个jQuery，一个Windows Phone：

将您的代码放入ready事件中（它不会在网页中生效）

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

在导航到开始页面之前设置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));
}

Answer 2

我最近对此rote a post，认为在这里分享它很有用......

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

enter image description here

第2步：更改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>

<强>输出

enter image description here

Jquery无法使用Visual Studio 2012中使用HTML 5模板创建的Windows 8 Phone应用程序

2 个答案: