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 に答える