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

Question

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

}); 

Answer 1

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