使用jquery在HTML中动态添加描述列表的问题

时间:2015-06-08 13:18:29

标签: javascript jquery html

我有一个DL(描述列表),在各自的DT和DD中有一些值。在这里,我使用切换功能来查看和隐藏DD。我有一个添加按钮。点击它,打开两个文本框来填充数据。在填写数据后,当我点击保存时,新的DT和DD被添加到我的DL。但切换功能不适用于新添加的DT和DD。请帮帮我。

$(document).ready(function(){
	$("#newpromos").hide();
	$("#promos dd").hide();
	
	 $("#promosave").click(function(){
	    	
	    	var title=$("#promotitle").val();
	    	var desc=$("#promodetails").val();
	    	
	    	if(title.length && desc.length){
	    	        $('<dt />', {html: title}).appendTo('#promos');
	    	        $('<dd />', {html: desc}).appendTo('#promos');
	    	    }
	    	$("#promos dd").hide();
	    	
	    });
	
    $("#promos dt").click(function () {
        $(this).next("#promos dd").slideToggle();
        $(this).toggleClass("expanded");
    });
	
    $("#addpromos").click(function(){
    	$("#newpromos").show();
    });
	
   
});
#promos dt, #promos dd { padding: 0 0 0 50px }
#promos dt { font-size:1.5em; color: #9d9d9d; cursor: pointer; height: 37px; line-height: 37px; margin: 0 0 15px 25px}
#promos dd { font-size: 1em; margin: 0 0 20px 25px}
#promos dt { background: url(http://www.designonslaught.com/files/2012/06/expand-icon.png) no-repeat left}
#promos .expanded { background: url("http://www.designonslaught.com/files/2012/06/expanded-icon.png") no-repeat left}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="Promo">
    <div>
        <dl id="promos">
            <dt>title1</dt>
            <dd>
                <p>
                    description1
                </p>
            </dd>
            <dt>title2</dt>
            <dd>
                <p>description2</p>
            </dd>
        </dl>
    </div>
    <div id="newpromos">
        <input type="text" id="promotitle">
        <br>
        <textarea id="promodetails"></textarea>
        <input type="button" value="Save" id="promosave">
    </div>
    <input type="button" value="Add Promotions" id="addpromos">
</div>

1 个答案:

答案 0 :(得分:0)

您需要将事件添加为&#34;委托事件&#34;:

$(document).on("click", "#promos dt",function () {
    $(this).next("#promos dd").slideToggle();
    $(this).toggleClass("expanded");
});