JavaScript未在onLoad中加载（Android webView浏览器问题）_Javascript_Android_Jquery Mobile

JavaScript未在onLoad中加载（Android webView浏览器问题）

javascript android jquery-mobile

JavaScript未在onLoad中加载（Android webView浏览器问题）,javascript,android,jquery-mobile,Javascript,Android,Jquery Mobile,当我使用android的webview时，我的javascript似乎根本没有加载，但在桌面浏览器上加载良好这是我的html和脚本，位于一个html文件下： <script> function initialiseFields(){ var name = "John Smith"; var staffId = "9877878"; alert( 'initialiseFields' ); $("#list").append('<li>

当我使用android的webview时，我的javascript似乎根本没有加载，但在桌面浏览器上加载良好

这是我的html和脚本，位于一个html文件下：

<script>

function initialiseFields(){
    var name = "John Smith";
    var staffId = "9877878";
    alert( 'initialiseFields' );

    $("#list").append('<li><h3>Additional Information:</h3><div data-role="fieldcontain"><input type="text" name="claimTitle" id=/"textFieldJourneyFrom" value="" /></div></li>');

    $('#list').listview('refresh');  
}

</script>



<body onLoad="initialiseFields();">
    <div data-role="content">
        <ul class="ui-li" data-role="listview" id="list" data-inset="true"  data-scroll="true">
        </ul>
</body>


函数initialiseFields（）{
var name=“约翰·史密斯”；
var staffId=“9877878”；
警报（'initialiseFields'）；
$（“#列表”）。附加（“附加信息：”）；
$（'#list'）。列表视图（'refresh'）；
}

基本上是尝试执行显示警报的initialiseFields，并将一些字段添加到listView中

警报和listView从未被调用/更新

编辑：另外，无论我通过javascript添加什么列表项，它也不会应用默认的jquery移动css样式。有什么原因吗

另一编辑：

答案是由我接受答案的人提供的，不过是一句警告。如果您使用的是日期选择器及其资产。提供的独奏曲不起作用，也就是说，由于某些奇怪的原因，它无法加载您的JS：

<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.datepicker.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">.

另外，我通过简单地设置主题尝试了上面的代码片段，它成功地将主题应用于文本、标题和背景，但在实际字段上，它没有将主题应用于输入字段

$("#list").append('<li data-theme="c"><h3>Additional Information:</h3><div data-role="fieldcontain" data-theme="c"><input type="text" name="information" id=/"textFieldInformation value="" data-theme="c"/></div></li>');

$（“#list”）.append（“附加信息：在使用jQuery Mobile时，不要使用内联javascript函数初始化。这主要是因为可能会发生此问题
jQuery Mobile页面不是一个普通的网页。与经典的web开发不同，jQuery Mobile在最初加载到DOM时将重新设置整个页面的样式。这在桌面浏览器上运行速度很快，但在移动浏览器/web视图（无论是安卓还是iOS）上运行都需要时间。因为此重新序列化需要时间，所以此内联函数将在内容在DOM中完全加载/增强之前执行。这也是为什么不应将document ready与jQuery Mobile一起使用的原因，因为它通常会在有用之前触发
为了解决这个问题，您应该使用jQuery移动页面事件。它们是专门创建的，用于覆盖从初始DOM加载到最终页面显示的页面加载状态
但要使其正常工作，您需要稍微更改HTML。带有data role=“content”的div必须包装到带有属性data role=“page”的div中，如下所示：
<body>
    <div data-role="page" id="index">    
        <div data-role="content">
            <ul class="ui-li" data-role="listview" id="list" data-inset="true"  data-scroll="true">

            </ul>
        </div>
    </div>        
</body>

$(document).on('pagebeforeshow', '#index', function(){ 
    initialiseFields();
});

如果您想了解更多关于页面事件的信息，请阅读此，为了透明起见，这是我的个人博客。最后一件事，您需要了解jQuery Mobile如何处理多个页面和javascript初始化，以便了解更多关于它的信息
你可以在这里进行测试：
很酷，谢谢。JS需要在单独的JS文件中吗？另外，你知道为什么默认的CSS不能应用到通过JS添加的新列表项中吗？你可以将它放在单独的JS文件中，也可以使用HTML，这取决于你的偏好。我会使用外部JS文件，也不要忘记阅读第二行k我在我的答案中发布了。它将告诉您外部文件加载与HTML文件内部加载之间的区别。关于第二个问题，请看我的另一个答案：基本上，动态添加的内容必须通过适当的小部件功能手动增强。如果是listvoew，则是listview（“刷新”）不，你已经知道了。啊，好的，所以我基本上必须在添加列表项时手动设置列表项的样式。是的，可以在这里找到示例：，只需查找与listview相关的章节