клонировать и добавлять в jquery mobile - удваивать? - PullRequest
1 голос
/ 09 августа 2011

Когда я клонирую и добавляю / добавляю фрагменты html в jquery mobile, фрагмент удваивается. Вы можете подключить этот код и проверить.

<code><!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>
        
счетчик = 1; $ (документ) .ready (function () { / * Добавить слушателей в Add Part * / $ ('. addPart'). click (function () { myClone = $ ('# template'). clone (); myClone.attr ("id", "template-" + counter); Счетчик ++; myClone.appendTo ("# placeholder"). trigger ("create"); // myClone.appendTo ("# placeholder"). page (); не работает в этой версии? вернуть ложь; }); // Переключить Показать / Скрыть HTML $ ('. preShowHTML'). click (function () { $ ( "# HTMLOut") текст ($ ( "тело") HTML ().). $ ( "# HTMLOut") переключение (). вернуть ложь; }); });

Ответы [ 2 ]

0 голосов
/ 09 августа 2011

Я думаю, что счетчик не в том месте.Однако это не делает пример более функциональным.

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

Я не уверен, что это правильный подход - клонирование html после применения jquery mobile своих слушателей и форматирования.

0 голосов
/ 09 августа 2011

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