Question

我在html表中有一个可折叠的行效果，它通过jquery给出。没有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);

});

Answer 1

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

在jquery AJAX响应之后用jquery重新调用可折叠效果

1 个答案: