1

我使用 jQuery UI 选项卡（）。我这样编写代码。首先，我使用 for(){} 制作了标签。我将 .live() 连接到标签div. But the problem is that only first tab的点击事件正在运行，其他标签的点击事件不起作用。如何连接 .live() 或 .bind()？请帮帮我。 HTML 代码

<div class="MYTABS" id="tabs">
        <ul>
            <% for(int i=0, n=scheduleList.size();i<n;i++){%>
                <li><a href="#fragment<%=i%>"><span><%=scheduleList.get(i).getName()%></span></a></li>
            <%}%>
        </ul>

        <% for(int i=0, n=scheduleList.size();i<n;i++){%>
            <div class="TABCONTENT" id="fragment<%=i%>"><%=scheduleList.get(i).getName()%>
                <div class="OFFTIME"><span>CURRENT TIME : </span><%=scheduleList.get(i).getOffTime()%></div>
                <div class="PLUS"><img id="year_Plus" src="../img/schedule/date_plus.png"/></div>
                <div class="TIME"><img src="../img/schedule/date_middle.png"/></div>
                <div class="MINUS"><img id="year_Minus" src="../img/schedule/date_minus.png"/></div>
                <img class="AMPM" id="am" src="../img/schedule/date_am.png"  onclick="toggleAmPm(this.id);"/>
                <img class="SETBTN" src="../img/schedule/btn_set.png" onclick="saveOffTime();"/>

                <div class="TIMETEXT" id="yearText" ><%=yyYear%></div>
                <div class="TIMETEXT" id="monthText"><%=zeroMonth %></div>
                <div class="TIMETEXT" id="dayText"><%=zeroDay %></div>
                <div class="TIMETEXT" id="hourText"><%=zeroHour %></div>
                <div class="TIMETEXT" id="minuteText"><%=zeroMinute %></div>
            </div>
        <%}%>
    </div>

JavaScript 代码

// make tabs
var tabOption = {
    select: function(event, ui){
          //alert("");
     }
};
var usageTabs = jQuery("#tabs").tabs(tabOption);

// click event
jQuery(".PLUS>img, .MINUS>img").on("click", function(){
    var clickedTime = this.id.split("_");

    // plus and minus
    var timeText = jQuery("#"+clickedTime[0]+"Text");
    var calcTime = "";
    if(clickedTime[1] === "Plus"){
        calcTime = parseInt(timeText.text(),10) + 1 ;
    }else{
        calcTime = parseInt(timeText.text(),10) - 1 ;
    }

    jQuery(timeText.text(calcTime));
});
4

1 回答 1

0

在#main 之后加载#second :)

$(function() {
    $( "#main" ).tabs({
        ajaxOptions: {
            success: function( xhr, status ) {
                $("#second").tabs();
            }

        }
    });

});
于 2013-01-03T02:15:18.073 回答