Question

我希望每次用户按下添加或删除时，使用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>

Answer 1

不是肯定我得到了你想做的事，但是这里有一些修正，看到这个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>

<强> 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");
    });
});

如何为每个添加和删除具有新ID的可折叠div

1 个答案: