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

Not positive I get what you want to do, but here's some fixes, see this jsFiddle: http://jsfiddle.net/Twisty/Tbmsa/ It seems to work when I click add, I see a new collapsible list, just under the first.

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>

JQUERY

$(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 回答