jquery mobile 中的克隆和追加 - 加倍？

发布于 2024-11-28 16:28:42 字数 2489 浏览 0 评论 0原文

当我在 jquery mobile 中克隆并附加/前置 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>

原文

When I clone and append/prepend html fragments in jquery mobile, fragment is doubling up. You can plug this code and test.

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷了相思 2024-12-05 16:28:42

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

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

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

I think the counter is in the wrong place. However this does not make the example any more functional.

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

I am not sure that this is correct approach - cloning html after jquery mobile has applied it's listeners and formatting.

回复收藏 0 原文

多情出卖 2024-12-05 16:28:42

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

$(document).ready(function(){
    $("div").live("pageshow", function () { 
        counter = 0;
        $(".addPart").click(function() {    
                counter++;
                $("#placeholder").append('<div  id="template-'+counter+'"><div data-role="fieldcontain"><input type="range" name="slider" class="ui-slider-input ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="slider'+counter+'" value="0" min="0" max="100" /></div></div>');
                $("#template-"+counter).trigger("create");

            return false;
        });   

    });
});
</script>

AJAX might make it slightly cleaner but here is a start:

$(document).ready(function(){
    $("div").live("pageshow", function () { 
        counter = 0;
        $(".addPart").click(function() {    
                counter++;
                $("#placeholder").append('<div  id="template-'+counter+'"><div data-role="fieldcontain"><input type="range" name="slider" class="ui-slider-input ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="slider'+counter+'" value="0" min="0" max="100" /></div></div>');
                $("#template-"+counter).trigger("create");

            return false;
        });   

    });
});
</script>

回复收藏 0 原文

~没有更多了~