0

折りたたみ可能なセットの div があり、その 2 つの折りたたみ可能な div 内にあります。

そして、プラスボタンをクリックすると、これらの折りたたみ可能な div に要素を動的に追加する必要があります。多くのコードを試しましたが、うまくいきませんでした。その方法を教えてください。

HTML コード

<div data-role="content">
 <div data-role="collapsible-set" id="setAllCategory">
     <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" id="setCategory1">
        <h1 ><label>Food</label>
        <a data-role="button" id="btnAddSubCat1" name="btnAddSubCat1"  data-rel="popup"  href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
     </div>

     <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" id="setCategory2">
        <h1 ><label>Dress</label>
        <a data-role="button" id="btnAddSubCat2" name="btnAddSubCat2"  data-rel="popup"  href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
     </div>
 </div>
</div>

JavaScript

var subCatObject = "<div class='ui-grid-b'>"
subCatObject        +="<div class='ui-block-a'><label>Hi</label></div>"
subCatObject        +="<div class='ui-block-b'><a href='#' data-role='button' data-iconpos='notext' data-icon='edit'></a></div>"
subCatObject        +="<div class='ui-block-c'><a href='#' data-role='button' data-iconpos='notext' data-icon='delete'></a></div>"
subCatObject        +="</div>";


    $('#btnAddSubCat1').click(function (){
           var temp = $(subCatObject);
           $(temp).appendTo('#setCategory1').page();
           $("#setCategory1").collapsibleset('refresh');
    });
4

1 に答える 1

1

以下のようにHTMLを変更しました

<div data-role="page" id="home">
    <div data-role="content">
        <div data-role="collapsible-set" id="setAllCategory" data-content-theme="d">
            <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
            id="setCategory1">
                 <h1><label>Food</label>
        <a data-role="button" id="btnAddSubCat1" name="btnAddSubCat1"  data-rel="popup"  href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>

                <div id="setCategoryContent1"></div>
            </div>
            <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
            id="setCategory2">
                 <h1><label>Dress</label>
        <a data-role="button" id="btnAddSubCat2" name="btnAddSubCat2"  data-rel="popup"  href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>

            </div>
        </div>
    </div>
</div>

以下のようにあなたのJavaScript

var subCatObject = "<div class='ui-grid-b'>"
subCatObject += "<div class='ui-block-a'><label>Hi</label></div>"
subCatObject += "<div class='ui-block-b'><a href='#' data-role='button' data-iconpos='notext' data-icon='edit'></a></div>"
subCatObject += "<div class='ui-block-c'><a href='#' data-role='button' data-iconpos='notext' data-icon='delete'></a></div>"
subCatObject += "</div>";

$('#btnAddSubCat1').bind('click', function () {
 $("#setCategoryContent1").html(subCatObject);
 $('#home').trigger('create');
});

ここから取り上げていただけると幸いです。

ここで動作するフィドルをチェックしてくださいhttp://jsfiddle.net/PKeSB/2/

于 2013-03-05T07:14:37.653 に答える