javascript - jquerymobile主题.html动态div替换jquery

标签 javascript jquery css jquery-mobile

所以我已经束手无策了,我正在将移动网站从自定义用户构建的主题升级为使用新的 jquerymobile 主题。

问题在于该网站有一个聊天室部分,它使用以下代码不断更新聊天消息 div,其中包含另一个包含新消息的 php 文件的内容。

    <script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">  
// jQuery Document  
$(document).ready(function() {
});

    function loadLog(){

        $.ajax({
            url: "chattextd.php?room=<?php echo $roomid; ?>&sid=<?php echo $sid; ?>",  
            cache: false,  
            success: function(html){          
                (document.getElementById("chatbox")).innerHTML = "";
                $("#chatbox").html(html); //Insert chat log into the #chatbox div                 
            }
        });  
    }  
    function sendData(){

        $.post ('chathandlerb.php',{message: form.message.value,roomid: form.roomid.value,cmode: form.cmode.value,sid: form.sid.value});
        $.ajax({
            url: "chattextd.php?room=<?php echo $roomid; ?>&sid=<?php echo $sid; ?>",  
            cache: false,  
            success: function(html){          
                (document.getElementById("chatbox")).innerHTML = "";
                $("#chatbox").html(html); //Insert chat log into the #chatbox div 
                $("#message").val(""); 
                loadLog();
            }
        });  
    }  

$('#form').submit(function() { 
    // submit the form 
    sendData(); 
    return false; 
});

loadLog();
setInterval (loadLog, 5000);
</script>

这段代码工作正常,直到我将 jquerymobile 主题 js 添加到文件的头部,然后我要么得到一个空白页面,要么加载页面,但聊天文本 div 是空的并且永远不会加载。

在添加 jquerymobile 部分之前,文件的工作副本位于此处: http://furrtrax.com/furryim/chatroomb.txt

损坏的位于以下网址: http://furrtrax.com/furryim/chatroomb.php.txt

所有包含内容都位于这些页面位置的正确相对 URL 中,因此如果您想查看脚本和 css 标记中加载的内容,您可以通过 url 加载它们。

请帮我解决这个问题。

最佳答案

第一个测试可能是“mobileinit”事件的使用。 “mobileinit”替换了 jQuery 的“document.ready”(在您的示例中为空),并在 JQM 完全加载后触发,请参阅 here

尝试像这样包装你的代码,也许会有所帮助......

$( document ).on( "mobileinit", function() {

    function loadLog(){
        $.ajax({
            url: "chattextd.php?room=<?php echo $roomid; ?>&sid=<?php echo $sid; ?>",  
            cache: false,  
            success: function(html){          
                (document.getElementById("chatbox")).innerHTML = "";
                $("#chatbox").html(html); //Insert chat log into the #chatbox div                 
            }
        });  
    }  
    function sendData(){

        $.post ('chathandlerb.php',{message: form.message.value,roomid: form.roomid.value,cmode: form.cmode.value,sid: form.sid.value});
        $.ajax({
            url: "chattextd.php?room=<?php echo $roomid; ?>&sid=<?php echo $sid; ?>",  
            cache: false,  
            success: function(html){          
                (document.getElementById("chatbox")).innerHTML = "";
                $("#chatbox").html(html); //Insert chat log into the #chatbox div 
                $("#message").val(""); 
                loadLog();
            }
        });  
    }  

    $('#form').submit(function() { 
        // submit the form 
        sendData(); 
        return false; 
    });

    loadLog();
    setInterval (loadLog, 5000);
});

关于javascript - jquerymobile主题.html动态div替换jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30772167/

相关文章:

javascript - 将 json 数据格式化为驼峰式格式

php - jquery 在网页上播放幻灯片的最简单方法

javascript - 更新特定的 div id 类

javascript - VJet 和 Javascript IDE 可以将两者集成

javascript - 如何在 jquery 中阻止这种限制单词的奇怪事情?

javascript - 调整浏览器大小时 html 组件的比例大小

html - 如何正确添加嵌套div

javascript - IE 抛出 JavaScript 错误(适用于其他浏览器)

javascript - 从 Google map (V3) 外部打开特定标记的信息窗口

javascript - 如何执行: onClick Javascript,隐藏具有过渡效果的div