0

我在通过 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>&nbsp;</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);

}); 
4

1 回答 1

0

首先,Javascript 区分大小写。您的函数名为orBK,但在您的 AJAX 更新中您重新绑定为orBk. 其次,orBK分配一个点击处理程序,但它本身正在分配另一个点击处理程序。最后,查找 jQuery 委托事件绑定(.live在旧版本中,.on在较新版本中)。你不需要重新绑定你的处理程序。

于 2012-04-11T04:02:54.913 回答