0

jQuery-mobile を使用して、ユーザーが追加または削除を押すたびに追加/削除divしたいと考えています。data-role="collapsible"そして、新しい div に新しい ID を与えます。

私が使用する複製方法が機能しません。

これは私の「悪い」コードです：

<body>

<div data-role="page"  id="page1"> 
    <div data-role="header">
        <h1>page1</h1>
</div>

<div data-role="content">
<div data-role="collapsible" data-theme="a" data-content-theme="a" id="collapsible">
<h3>New person</h3>
<ul >
<li>Name<input type="text"></li>
<li>Phone<input type="text"></li>
<li> <label for="date">Date Input:</label>
<li><input type="date" name="date" id="date" value="text"/></li>

                <li>  <a id="changePageButton2" data-role="button">show Calendar</a></li>
 </ul>
</div>
<div id="placeholder"></div>

</div>



<button id="add">add</button>

    </div>


</body>
</html>

<script>


$('#add').click(function() {    
    var myClone = $('#collapsible').clone();

    myClone.prependTo("#placeholder");   
    return false;
    });  




    $(function() {
    $("#changePageButton2").click(function() {
        $.mobile.changePage("#page2");
    });        
});

  $(function() {
    $("#changePageButton1").click(function() {
        $.mobile.changePage("#page1");
    });        
});
</script>
4

1 に答える 1

0

あなたがやりたいことはわかりませんが、ここにいくつかの修正があります。この jsFiddle を参照してください: http://jsfiddle.net/Twisty/Tbmsa/をクリックすると動作するようです。 add.

HTML

<html>
<body>
    <div data-role="page"  id="page1">
        <div data-role="header">
            <h1>page1</h1>
        </div>
        <div data-role="content">
            <div data-role="collapsible" data-theme="a" data-content-theme="a" id="collapsible">
                <h3>New person</h3>
                <ul>
                    <li>Name<input type="text"></li>
                    <li>Phone<input type="text"></li>
                    <li><label for="date">Date Input:</label></li>
                    <li><input type="date" name="date" id="date" value="text"/></li>
                    <li><a id="changePageButton2" data-role="button">show Calendar</a></li>
                </ul>
            </div>
            <div id="placeholder"></div>
        </div>
        <button id="add">add</button>
    </div>
</body>
</html>

Jクエリ

$(function() {
    $("#changePageButton2").click(function() {
        $.mobile.changePage("#page2");
    });
    $('#add').click(function() {
        var myClone = $('#collapsible').clone();
        myClone.prependTo("#placeholder");
        return false;
    });
    $("#changePageButton1").click(function() {
        $.mobile.changePage("#page1");
    });
});
于 2012-12-12T22:06:28.553 に答える