Javascript 如果页面未刷新,为什么jquery toggle()方法不能正常工作
使用下面的代码,我可以调用一个模态窗口。我使用jquery.toggle()方法根据复选框选择隐藏和显示模式窗口的某些部分Javascript 如果页面未刷新,为什么jquery toggle()方法不能正常工作,javascript,jquery,Javascript,Jquery,使用下面的代码,我可以调用一个模态窗口。我使用jquery.toggle()方法根据复选框选择隐藏和显示模式窗口的某些部分 $(document).ready(function() { function ShowSaveEventForm(start, end, allDay) { var month = start.getMonth() + 1 + ""; if (month.length == 1) {
$(document).ready(function() {
function ShowSaveEventForm(start, end, allDay) {
var month = start.getMonth() + 1 + "";
if (month.length == 1) {
month = "0" + month;
}
var date = start.getDate() + "";
if (date.length == 1) {
date = "0" + date;
}
var year = start.getFullYear();
var hours = start.getHours();
var sec = start.getSeconds();
var msec = start.getMilliseconds();
var stdate = new Date(year, month, date, hours, sec, msec);
var sdate = year + "-" + month + "-" + date;
var month = end.getMonth() + 1 + "";
if (month.length == 1) {
month = "0" + month;
}
var date = end.getDate() + "";
if (date.length == 1) {
date = "0" + date;
}
var year = end.getFullYear();
var hours = end.getHours();
var sec = end.getSeconds();
var msec = end.getMilliseconds();
var eddate = new Date(year, month, date, hours, sec, msec);
var edate = year + "-" + month + "-" + date;
$('#eventdate').val(sdate);
$('#edate').val(edate);
var acctype = $('input:radio[name=accesstype]:checked').val();
if (acctype == 1) {
$('#chose-multi').hide();
}
$("#check").click(function() {
$("#stime").toggle();
$("#etime").toggle();
});
$("#rstrcted").click(function() {
$("#chose-multi").show();
});
$("#private").click(function() {
$("#chose-multi").hide();
});
$("#public").click(function() {
$("#chose-multi").hide();
});
$('#error-message').hide(); // hide the error message section
$('#modal-form').modal('show');
}
我的HTML代码是
<div id="modal-form" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<center> <h4 class="blue bigger">Create Event</h4></center>
</div>
<center>
<div id="error-message" class="alert alert-danger col-xs-12" style="display:none; height:10%">
<!-- Place holder for errors -->
</div>
</center>
<div class="modal-body overflow-visible">
<div class="row" style="height:10%">
<div class="col-xs-12"> <!-- Start Col-->
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<tr>
<td class="col-sm-4 control-label no-padding-left">Event Type</td>
<td class="col-sm-8">
<label>
<input id="eventtype" type="radio" name="caltype" value="{{ constant('KonnectEz\\WebBundle\\Common\\CommonConstants::VALUE_FOR_HOLIDAY') }}"/>
<span class="lbl"> Holiday</span>
</label>
<label>
<input id="caltype" type="radio" name="caltype" value="{{ constant('KonnectEz\\WebBundle\\Common\\CommonConstants::VALUE_FOR_EVENT') }}" checked/>
<span class="lbl"> Event</span>
</label>
</td>
</tr>
<tr>
<td class="col-sm-4 control-label no-padding-left">Name</td>
<td class="col-sm-8" ><input id="name" type="text" name="eventname" value="" required /></td>
</tr>
<tr>
<td class="col-sm-4 control-label no-padding-left">Description</td>
<td class="col-sm-8" > <input id="desc" type="text" name="description" value=""/> </td>
</tr>
<tr>
<td class="col-sm-4 control-label no-padding-left">Event Start Date</td>
<td class="col-sm-8"><input id="eventdate" type="text" name="date" value="yyyy-mm-dd" />
</td>
<tr>
<td class="col-sm-4 control-label no-padding-left">Event End Date</td>
<td class="col-sm-8"><input id="edate" type="text" name="eventenddate" value="yyyy-mm-dd" />
</td>
</tr>
<tr>
<td class="col-sm-4 control-label no-padding-left">Event Duration</td>
<td class="col-sm-8">
<div class="checkbox">
<label>
<input id="check" name="agrType-chk" type="checkbox" value="1" />
<span class="lbl"> All Day </span>
</label>
</div>
</td>
</tr>
<tr id="stime">
<td class="col-sm-4 control-label no-padding-left" id="time">Start Time</td>
<td class="col-sm-8" > <input type="text" name="stime" value="08:00" />
</td>
</tr>
<tr id="etime">
<td class="col-sm-4 control-label no-padding-left" id="edtime">End Time</td>
<td class="col-sm-8" id="etime"> <input type="text" name="etime" value="18:00" />
</td>
</tr>
<tr>
<td class="col-sm-4 control-label no-padding-left">Access Type</td>
<td class="col-sm-8">
<label>
<input id="public" name="accesstype" type="radio" value="{{ constant('KonnectEz\\WebBundle\\Common\\CommonConstants::VALUE_FOR_PUBLIC') }}" checked/>
<span class="lbl"> Public </span>
</label>
<label>
<input id="private" name="accesstype" type="radio" value="{{ constant('KonnectEz\\WebBundle\\Common\\CommonConstants::VALUE_FOR_PRIVATE') }}" />
<span class="lbl"> Private </span>
</label>
<label>
<input id="rstrcted" name="accesstype" type="radio" value="{{ constant('KonnectEz\\WebBundle\\Common\\CommonConstants::VALUE_FOR_RESTRICTED') }}" />
<span class="lbl"> Restricted </span>
</label>
</td>
</tr>
<tr id="chose-multi">
<td class="col-sm-4 control-label no-padding-left" >Select A Group:</td>
<td class="col-sm-8" >
{# <div class="row">#}
<div class="space-2"></div>
<select multiple="" class="col-xs-10 col-sm-8" id="selector" name="selector" >
{#<option value="0">Select Group</option>#}
{% for group in groupList %}
<option value="{{group.id}}">{{ group.name }}</option>
{% endfor %}
</select>
{# </div> #}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="height:10%">
<button id="save" class="btn btn-sm" data-dismiss="modal">
Cancel
</button>
<button class="btn btn-sm btn-primary" id="btnsubsave">
Save
</button>
</div>
</div>
</div>
</div>
&时代;
创建事件
事件类型
假日
事件
名称
描述
活动开始日期
活动结束日期
事件持续时间
整天
开始时间
结束时间
访问类型
公开的
私有的
受限制的
选择一个组:
{# #}
{#选择组}
{组列表%中的组的%1}
{{group.name}
{%endfor%}
{# #}
取消
拯救
但是jquery.toggle()在其他时间无法正常工作。任何人都可以帮助解决此问题。从函数中取出以下代码
showsaveventform
$("#check").click(function() {
$("#stime").toggle();
$("#etime").toggle();
});
$("#rstrcted").click(function() {
$("#chose-multi").show();
});
$("#private").click(function() {
$("#chose-multi").hide();
});
$("#public").click(function() {
$("#chose-multi").hide();
});
所以这就像是跟随
$(document).ready(function() {
$("#check").click(function() {
$("#stime").toggle();
$("#etime").toggle();
});
$("#rstrcted").click(function() {
$("#chose-multi").show();
});
$("#private").click(function() {
$("#chose-multi").hide();
});
$("#public").click(function() {
$("#chose-multi").hide();
});
function ShowSaveEventForm(start, end, allDay) {
var month = start.getMonth() + 1 + "";
if (month.length == 1) {
month = "0" + month;
}
...
...