jQuery UI tabs()を使用しています。このようなコードを書きます。まず、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));
});