为什么 jquery toggle(） 方法在页面不刷新的情况下无法正常工作
why jquery toggle() method doesnot work properly if page is not refreshed
使用以下代码，我调用模态窗口。我正在使用jquery .toggle（）方法根据复选框选择隐藏和显示模态窗口的某些部分。
$(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>
但是jquery .toggle（）在交替时间无法正常工作。任何人都可以帮助解决这个问题。
将以下代码从函数中取出ShowSaveEventForm
$("#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;
}
...
...
相关文章：
- 为什么jQuery代码段在没有IFrame的情况下可以工作，而在有IFrame时却不能工作
- AngularJS绑定没有'在没有填充父范围的情况下无法工作
- AJAX函数在没有警报的情况下无法工作
- GET在POST不工作XMLHttpRequest的情况下正常工作
- Jquery脚本在没有警报的情况下无法工作
- Jquery在不触发事件的情况下部分工作
- 位置管理器在没有互联网的情况下无法工作
- Javascript 代码在没有警报的情况下无法工作，否则它可以完美运行
- AJAX 在没有警报的情况下无法工作
- jQuery脚本在没有警报的情况下无法工作
- 下载脚本和statcounter在不打开新页面的情况下协同工作
- "最大长度“;在输入类型＝“0”的情况下不工作;数字“;在html文本框中
- Angularjs在没有localhost的情况下无法工作
- JavaScript:函数在没有alert(）的情况下无法工作
- CakePhp2自动完成(jquery-ui-folding）在没有ajax的情况下无法工作，只能使用可用的输入数组
- 谷歌图表在不抛出异常的情况下无法工作
- AJAX在没有警告框的情况下无法工作
- 在IE中获得插入符号位置在一种情况下工作，在另一种情况下不工作
- 可以't使javascript文本效果在延迟的情况下正常工作
- Javascript代码在不同情况下的工作方式不同
