Jquery mobile jQuery mobile附加html代码_Jquery Mobile_Append

Jquery mobile jQuery mobile附加html代码

jquery-mobile

Jquery mobile jQuery mobile附加html代码,jquery-mobile,append,Jquery Mobile,Append,我想使用jQuery/jQuery mobile将一些代码附加到页面，我只想附加一次，而不是每次访问页面时 **最终编辑** <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <

我想使用jQuery/jQuery mobile将一些代码附加到页面，我只想附加一次，而不是每次访问页面时

**最终编辑**

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

    <script>
    //$(document).ready(function()                  // get error when I use this
    $('#page1').live('pageshow', function ()                
        {  
            //  alert("!");
                var section1 = "<p>some code for page 1...</p>";                
                myClone1 = $(section1);                                 
                myClone1.appendTo("#placeholder1").trigger('create');
        });             

    $('#page2').live('pageshow', function ()                
        {  
            //  alert("!");
                var section2 = "<p>some code for page 2...</p>";
                myClone2 = $(section2);                 
                myClone2.appendTo("#placeholder2").trigger('create');

        });         
        </script>

</head> 
<body> 
    <div data-role="page" id="page1">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                        <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>             
                    </ul>
                    </div>
                <div id="placeholder1">Page 1</div>
            </div>      
    </div>

    <div data-role="page" id="page2">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>                                 
                    </ul>
                    </div>
                <div id="placeholder2">Page 2</div>
            </div>
        </div>      
    </div>


</body>
</html>


页面标题
//$（document）.ready（function（）//使用此函数时出现错误
$（'page1'）.live（'pageshow'，function（）
{  
//警惕（“！”）；
var section1=“第1页的一些代码…”；
myClone1=$（第1节）；
myClone1.appendTo（#placeholder 1”）.trigger（'create'）；
});             
$（'page2'）.live（'pageshow'，function（）
{  
//警惕（“！”）；
var section2=“第2页的一些代码…”；
myClone2=$（第2节）；
myClone2.appendTo（#placeholder 2”）.trigger（'create'）；
});         



第1页



第2页

好的，这有点棘手，但这里有一个实时版本：

JS:

varelem\u id；
var appendToStatus={}；
appendToStatus['page1']=true；
appendToStatus['page2']=true；
$（'div'）.live（'pageshow'，function（）{
elem_id=$（this.attr（'id'）；
appendToStatus[elem_id]=fnCreateGroups（elem_id，appendToStatus[elem_id]）；
}); 
函数fnCreateGroups（元素id、附件状态）{
如果（appendToStatus==true）{
var section=“某些代码表示“+elem_id+”..”；
myClone=$（节）；
myClone.appendTo（“#”+elem_id+“_占位符”）.trigger（'create'）；
返回false；
}               
}

HTML:





第1页



第2页

好的，这有点棘手，但这里有一个实时版本：

JS:

varelem\u id；
var appendToStatus={}；
appendToStatus['page1']=true；
appendToStatus['page2']=true；
$（'div'）.live（'pageshow'，function（）{
elem_id=$（this.attr（'id'）；
appendToStatus[elem_id]=fnCreateGroups（elem_id，appendToStatus[elem_id]）；
}); 
函数fnCreateGroups（元素id、附件状态）{
如果（appendToStatus==true）{
var section=“某些代码表示“+elem_id+”..”；
myClone=$（节）；
myClone.appendTo（“#”+elem_id+“_占位符”）.trigger（'create'）；
返回false；
}               
}

HTML:





第1页



第2页

在实际追加之前，您可以检查是否存在要追加的代码。这样，在后续访问页面时，将不会添加数据：

$('#page1').live('pageshow', function ()                
{  
    //  alert("!");
    if ($(this).find('p.appended_code').length === 0) {
        var section1 = "<p class='appended_code'>some code for page 1...</p>";                
        myClone1 = $(section1);                                 
        myClone1.appendTo("#placeholder1").trigger('create');
    }
});

$（'page1'）.live（'pageshow'，function（）
{  
//警惕（“！”）；
if（$（this）.find（'p.added_code'）。长度==0）{
var section1=“


请注意，我将“added_code”类添加到您要附加的段落标记中，这是我用来检查是否存在附加代码的选择器
--更新--
如果使用基于数字的命名约定，还可以稍微清理代码：
var pageData = new Array();
pageData[1] = "<p class='appended_class'>some code for page 1...</p>";
pageData[2] = "<p class='appended_class'>some code for page 2...</p>";
$('div[id^="page"]').live('pagebeforeshow', function () {
    if ($(this).find('p.appended_class').length === 0) {
        var page_num = $(this).attr('id').replace('page', '');
        $("#placeholder" + page_num).append(pageData[page_num]).trigger('create');
    }
}); 

var pageData=new Array（）；
pageData[1]=“为第1页添加了一些代码…””；
pageData[2]=“为第2页添加了一些代码…””；
$（'div[id^=“page”]”）。live（'pagebeforeshow'，函数（）{
if（$（this）.find（'p.added\u class'）。长度==0）{
var page_num=$（this.attr（'id'）.replace（'page'，''）；
$（“#占位符”+page_num）.append（pageData[page_num]）.trigger（'create'）；
}
}); 

请注意，div[id^=“page”]
选择器搜索id以“page”开头的div
下面是给你的JSFIDLE：
如果希望在初始加载时附加数据，我建议在将数据附加到函数中的代码行中，并在$（document.ready（）上调用它
在实际追加之前，您可以检查是否存在要追加的代码。这样，在后续访问页面时，将不会添加数据：
$('#page1').live('pageshow', function ()                
{  
    //  alert("!");
    if ($(this).find('p.appended_code').length === 0) {
        var section1 = "<p class='appended_code'>some code for page 1...</p>";                
        myClone1 = $(section1);                                 
        myClone1.appendTo("#placeholder1").trigger('create');
    }
});

$（'page1'）.live（'pageshow'，function（）
{  
//警惕（“！”）；
if（$（this）.find（'p.added_code'）。长度==0）{
var section1=“

请注意，我将“added_code”类添加到您要附加的段落标记中，这是我用来检查是否存在附加代码的选择器
--更新--
您还可以清理c
var pageData = new Array();
pageData[1] = "<p class='appended_class'>some code for page 1...</p>";
pageData[2] = "<p class='appended_class'>some code for page 2...</p>";
$('div[id^="page"]').live('pagebeforeshow', function () {
    if ($(this).find('p.appended_class').length === 0) {
        var page_num = $(this).attr('id').replace('page', '');
        $("#placeholder" + page_num).append(pageData[page_num]).trigger('create');
    }
}); 

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

    <script>
    $('#page1').live('pagecreate', function ()              
        {  
                var section1 = "<p>some code for page 1...</p>";                
                myClone1 = $(section1);                                 
                myClone1.appendTo("#placeholder1").trigger('create');
        });             

    $('#page2').live('pagecreate', function ()              
        {  
                var section2 = "<p>some code for page 2...</p>";
                myClone2 = $(section2);                 
                myClone2.appendTo("#placeholder2").trigger('create');

        });         
        </script>

</head> 
<body> 
    <div data-role="page" id="page1">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                        <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>             
                    </ul>
                    </div>
                <div id="placeholder1">Page 1</div>
            </div>      
    </div>

    <div data-role="page" id="page2">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>                                 
                    </ul>
                    </div>
                <div id="placeholder2">Page 2</div>
            </div>
        </div>      
    </div>


</body>
</html>