我在通过 jquery 给出的 html 表中有一个可折叠的行效果。如果没有 ajax 轮询,这可以正常工作,但是当 ajax 更新发生时,崩溃效果将不起作用,我在这里做错了什么。
注意:有时当用户单击 + 号时,它会变为 - 号,但行不显示,而且大多数情况下,即使双击也适用
.xhtml 页面
<tbody>
<ui:repeat var="trY" value="#{dataBean.bdata}">
<tr class="main-#{trY.symbol}">
<td><span id="more-#{trY.symbol}">
<ui:fragment rendered="#{trY.has == '+'}">
<a id="a-#{trY.symbol}" class="plus" href="#" style="color: black;" name="+">+</a>
</ui:fragment>
</span>
</td>
</tr>
<ui:repeat var="trB" value="#{trY.comp}" varStatus="st">
<tr class="orB-#{trY.symbol}">
<td class="tbl_column_buy1">
<div class="qty_margins">
<span id="orBbidQty-#{trY.symbol}#{st.index}">#{trB.bidQuantity}</span>
</div>
</td>
<td class="tbl_column_buy2">
<div class="qty_margins">
<span id="orBbidPrice-#{trY.symbol}#{st.index}">#{trB.bidPrice}</span>
</div>
</td>
<td> </td>
</tr>
</ui:repeat>
</tbody>
jQuery 脚本
$(document).ready(function() {
$('.orB').hide();
$(".plus").click(function(){
var id = $(this).attr('id');
id = id.split('-');
if($("#a-"+id[1]).html() == '+'){
$(".orB-"+id[1]).show();
$("#a-"+id[1]).html("-");
}else if($("#a-"+id[1]).html() == '-'){
$(".orB-"+id[1]).hide();
$("#a-"+id[1]).html('+');
}
return false;
});
});
function orBK(){
$(".plus").click(function(){
var id = $(this).attr('id');
id = id.split('-');
if($("#a-"+id[1]).html() == '+'){
$(".orB-"+id[1]).show();
$("#a-"+id[1]).html("-");
}else if($("#a-"+id[1]).html() == '-'){
$(".orB-"+id[1]).hide();
$("#a-"+id[1]).html('+');
}
return false;
});
}
/* ajax timer to update */
$(document).ready(function() {
var i = setInterval(function ()
{
$.ajax({
type : "POST",
url : 'http://localhost:8080/myproject/faces/trade/dataPage.xhtml',
dataType : "json",
success: function(data) {
$.each(data, function(i, item) {
if(data[i].Has == "+" ){
$("span[id*='more-"+data[i].Symbol+"']").html("<a id='a-"+data[i].Symbol+"' class='plus' href='#' style='color: black;'>+</a>");
}
if(data[i].comp != null){
for(var j=0; j<data[i].comp.length; j++){
$("span[id*='orBbidQty-"+data[i].Symbol+""+j+"']").text(item.comp[j].BidQuantity);
$("span[id*='orBbidPrice-"+data[i].Symbol+""+j+"']").text(item.comp[j].BidPrice);
}
}
});
$(".plus").unbind('click', orBK);
$(".plus").bind('click', orBK);
},
error : function() {
alert("Sorry, The requested property could not be found.");
}
});
}, 4000);
});