use only one of this handlers $(document).ready()
or $(window).load
and your script should work fine.
note that the $(window).ready
run before the $(document).load()
.
题
I have this jquery code that will not reveal a content block that starts our as display: none
$(document).ready(function() {
$(window).load(function() {
$('#anId').hide(); // show section
$('#anId').show(); // show section
$('#anId').hide().show(); // show section
$('#anId').css('display', 'block'); // show section
}); // end .load()
}); // end .ready()
Any ideas of suggestions as to why?
Here's the markup:
<fieldset class="formField__marginTop formField__area" id="anId" style="display: none;">
<legend>Reservation Notes</legend>
<div class="formField__optional">
<label for="reservationNote">Optional Notes</label>
<textarea name="reservationNote" id="reservationNote" rows="5" cols="21" class="formField__text formField__textarea255" enabled="enabled" maxlength="255"></textarea>
<small class="formField__tip">Enter any additional and pertinent information relating to this reservation.</small>
</div>
<div class="formField__optional">
<label>Note Type</label>
<fieldset class="formField__list formField__inlineButtons" enabled="enabled">
<label for="reservationNoteType_746440">
<input type="radio" value="0" name="reservationNoteType" id="reservationNoteType_746440" class="formField__list" checked="checked"> Private (Internal Use Only)
</label>
<label for="reservationNoteType_445052">
<input type="radio" value="1" name="reservationNoteType" id="reservationNoteType_445052" class="formField__list"> Public (Customer Viewable)
</label>
</fieldset>
<small class="formField__tip">Choose whether this note is for internal or external use.</small>
</div>
</fieldset>
解决方案
use only one of this handlers $(document).ready()
or $(window).load
and your script should work fine.
note that the $(window).ready
run before the $(document).load()
.
其他提示
Your problem is that you've placed a window.load
event inside a document.ready
event. window.load
should happen after document.ready
so it will never fire. document.ready
is better for this kind of effect because it fires when the DOM is ready for action.
Remove the $(window).load(function() {
part and corresponding });
and your code should work.
Edit:
The window.load
event will fire when the window
object has finished loading. You can actually attach a load()
event to anything, so you can fire it when an image has finished loading or similar. Further details are available here:
https://api.jquery.com/load-event/
The document.ready
event will fire when the DOM is fully loaded - this is generally the point when the page is ready to accept manipulation by JavaScript. As @Jason P pointed out, this is in fact before window.load
because that event fires when everything in the page has finished loading. There are more details here:
A practical example would be a simple page with a really big image in it which takes a few seconds to load. The document.ready
event will fire when the DOM has been constructed by the browser, but the window.load
function will only fire after the image has loaded so this could be a few seconds after the page has been displayed.