我有一个链接列表。当我点击它们时,子图层会显示,当我再次单击该子图层时,会隐藏该子图层。
**HTML:**
<!-- list of links-->
<div id="results">
<a href="javascript:void(0);" class="showMore" id="1">Click to show more information about 1</a><br>
<a href="javascript:void(0);" class="showMore" id="2">Click to show more information about 2</a><br>
<a href="javascript:void(0);" class="showMore" id="3">Click to show more information about 3</a><br>
<a href="javascript:void(0);" class="showMore" id="4">Click to show more information about 4</a><br>
<!-- sub layers for each of the links -->
<div class="1">about 1<br>
<a onclick="javascript:saveItem('1'); return false;" href="javascript:return false;">Record info about 1</a>
</div>
<div class="2">about 2<br>
<a onclick="javascript:saveItem('2'); return false;" href="javascript:return false;">Record info about 2</a>
</div>
<div class="3">about 3<br>
<a onclick="javascript:saveItem('3'); return false;" href="javascript:return false;">Record info about 3</a>
</div>
<div class="4">about 4<br>
<a onclick="javascript:saveItem('4'); return false;" href="javascript:return false;">Record info about 4</a>
</div>
</div>
**JS:**
$(document).ready(function()
{
$(".showMore").click(function(e){
$("." + e.currentTarget.id).toggle()
});
});
function saveItem(id)
{
$.blockUI({ message: 'Loading ...'});
theUrl = 'controller.php';
$.ajax ({
url: laUrl,
data: params,
type: "POST",
async:true,
success: function (data, textStatus)
{
$('#results').html (data);
$.unblockUI();
}
});
}
它运作良好。但是当我点击子图层内部的链接,带有saveItem
函数的链接时,该函数会保存链接,重新加载结果div
并且显示和隐藏图层不会工作了。
没有错误,只是没有工作。
如何重新绑定showMore点击?或者如何重新添加处理程序?对不起,我的javascript / jquery不太流利
有什么想法吗?
谢谢!!
编辑:我找到了解决方案。我只需要添加:
$(".showMore").click(function(e){
$("." + e.currentTarget.id).toggle()
});
之后:
$.unblockUI();
在saveItem函数中。
那很容易^ _ ^