我有一个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>
答案 0 :(得分:0)
您需要将事件添加为&#34;委托事件&#34;:
$(document).on("click", "#promos dt",function () {
$(this).next("#promos dd").slideToggle();
$(this).toggleClass("expanded");
});