来自JS的phonegap android插入元素

时间:2013-07-01 10:59:24

标签: android jquery jquery-mobile cordova

在下面的代码中我试图打印并从javascript插入一个元素到android模拟器。我再也看不到文本hello world ..我在这里做错了什么..

<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/fonts/font.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />


    <script>
    goLogin();
    </script>
</head>

<body>

<div id="medn_content" class="medn_content" data-role="page" >      
    </div>
</body>
</html>

index.js

function goLogin(htm)
{
alert('here');
$("#medn_content").appendTo("<p> hello world again</p>");
}

2 个答案:

答案 0 :(得分:1)

工作示例:http://jsfiddle.net/Gajotres/rrSdV/

您的代码中有错误:

function goLogin(htm)
{
    alert('here');
    $("#medn_content").appendTo("<p> hello world again</p>");
}

应该是这样的:

function goLogin(htm)
{
    alert('here');
    $("#medn_content").append("<p> hello world again</p>");
}

基本上将 appendTo 更改为 append 。这些功能的工作方式有很大的不同。

此外,如果您使用的是jQuery Mobile,则需要在将页面加载到DOM后附加新内容。为此,您需要使用正确的jQuery Mobile页面事件。您的代码应如下所示:

<script>
    $(document).on('pagebeforeshow', '#medn_content', function(){ 
        goLogin();
    });
</script>

如果您想了解有关jQuery Mobile页面事件及其工作原理的更多信息,请查看 ARTICLE 或查找 HERE

最后,您的代码应如下所示:

HTML:

<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/fonts/font.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
    $(document).on('pagebeforeshow', '#medn_content', function(){ 
        goLogin();
    });
</script>
</head>
<body>
    <div id="medn_content" class="medn_content" data-role="page" >      
    </div>
</body>
</html>

使用Javascript:

function goLogin(htm)
{
    alert('here');
    $("#medn_content").append("<p> hello world again</p>");
}

答案 1 :(得分:0)

请改用此script标记:

<script>
$( function() {
    document.addEventListener("deviceready", goLogin, false);
});

 function goLogin(htm)
 {
   alert('here');
   $("#medn_content").appendTo("<p> hello world again</p>");
 }
 </script>