Jquery mobile 在jquery mobile中克隆和附加-加倍？_Jquery Mobile_Append_Clone

Jquery mobile 在jquery mobile中克隆和附加-加倍？

jquery-mobile

Jquery mobile 在jquery mobile中克隆和附加-加倍？,jquery-mobile,append,clone,Jquery Mobile,Append,Clone,当我在jQueryMobile中克隆并附加/前置html片段时，片段会加倍。您可以插入此代码并进行测试 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1">  <

当我在jQueryMobile中克隆并附加/前置html片段时，片段会加倍。您可以插入此代码并进行测试

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- standard Jquery/jQuery Mobile Libraries -->
    <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>   
    </head> 

    <body>  
    <div data-role="page" id="mainmenu">
    <div data-role="header" data-position="inline"></div>

    <div class="ui-body ui-body-c">
        <div data-role="content">   

        <a href="#" class="preShowHTML">click to view HTML</a>      
        <pre>
        <span id="HTMLOut">
        my HTML output goes here...
        </span>
        </pre>
    </div>
    </div>  


    <div id='groupA' class='preGroups'>         
        <div id='placeholder' ></div>   
    </div>

    <fieldset class="ui-grid-a" data-inline="true">     
        <div class="ui-block-b"><button type="submit"  class="addPart" data-theme="a" data-icon="plus">Add Serial/Part</button></div>
    </fieldset>

    <div id='template'>                 
        <div data-role="fieldcontain">
            <input type="range" name="QTY" id="preQuant01" value="1" min="1" max="10"/>
        </div>

    </div>
</div>

<style>
#template,  #HTMLOut, #XMLOut{
    display:none;
}
</style>


<script>
counter = 1;

$(document).ready(function() {

/* Add a listeners to Add Part */   
    $('.addPart').click(function() {    
            myClone = $('#template').clone();           
            myClone.attr("id", "template-" + counter);  
            counter++;
            myClone.appendTo("#placeholder").trigger( "create" );
            // myClone.appendTo("#placeholder").page(); does not work in this version?

        return false;
    });   

    // Toggle Show/Hide HTML
    $('.preShowHTML').click(function() {    
         $("#HTMLOut").text($("body").html());
         $("#HTMLOut").toggle();
        return false;
    });             
});
</script>


我的HTML输出在这里。。。
添加序列号/部件号
#模板，#HTMLOut，#XMLOut{
显示：无；
}
计数器=1；
$（文档）.ready（函数（）{
/*添加侦听器以添加零件*/
$（'.addPart'）。单击（函数（）{
myClone=$（“#模板”）.clone（）；
属性（“id”，“模板-”+计数器）；
计数器++；
myClone.appendTo（“#占位符”）.trigger（“创建”）；
//myClone.appendTo（“#占位符”）.page（）在此版本中不起作用？
返回false；
});   
//切换显示/隐藏HTML
$（'.presshowHTML'）。单击（函数（）{
$（“#HTMLOut”）.text（$（（“body”）.html（））；
$（“#HTMLOut”）.toggle（）；
返回false；
});             
});

AJAX可能会让它稍微干净一点，但这是一个开始：

myClone = $('#template').clone();           
myClone.attr("id", "template-" + counter);  
//counter++;
myClone.appendTo("#placeholder");
$('#template-'+counter).page();                
counter++;

$（文档）.ready（函数（）{
$（“div”）.live（“pageshow”，函数（）{
计数器=0；
$（“.addPart”）。单击（函数（）{
计数器++；
$（“#占位符”）。追加（“”）；
$（“#模板-”+计数器）。触发器（“创建”）；
返回false；
});   
});
});

我想柜台放错地方了。然而，这并没有使示例更具功能性

我不确定这是不是正确的方法——在jquery mobile应用了它的侦听器和格式后克隆html。

不太正确。。。我在page（）函数中找不到任何内容。它应该做什么？JQM标记页面的所有元素。加载DOM之后，让JQM处理标记就容易多了，让它来完成最难的部分。“page（）”函数使这变得很容易…我还没有真正测试过该代码。。。在回顾之后，我会做一些修改。。。页面加载后的jquery克隆正在使用正确的标记创建滑块，页面函数实际上正在重新标记滑块。其中一个包含滑动jquery移动功能，而另一个只是设计成一个，但实际上什么都不做。

myClone = $('#template').clone();           
myClone.attr("id", "template-" + counter);  
//counter++;
myClone.appendTo("#placeholder");
$('#template-'+counter).page();                
counter++;