2012-07-04 22 views
1

我使用jQuery UI選項卡()。 我寫這樣的代碼。 首先,我使用for(){}進行了製表。我將.live()連接到標籤div. But the problem is that only first tab的單擊事件正在運行, 其他標籤的單擊事件不起作用。 如何連接.live()或.bind()?請幫幫我。 HTML代碼如何將.live()連接到jquery ui選項卡div

<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

.live已被棄用,以便使用。對吧。 –

+0

我曾經使用.on(),但也有同樣的問題。因爲我是初學者....我認爲我的代碼有div的ID問題。 – kww1023

+1

這是你的整個JS代碼?在調用選項卡或綁定到單擊事件之前,請等待dom準備就緒。 '$(document).ready({/ * YOUR CODE HERE * /});' – nbrooks

回答

0

負載#second #main後:)

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

     } 
    }); 

}); 
相關問題