events load and ready not firing - javascript

This is my code:
$(document).on('ready load click',function(){
console.log('hiihuhu')
})
I included the jquery script above.
The problem is the click event is firing but the load or ready event is not.
I don't see any error in my console.
What could be the problem?

Which Version of jQuery are you using
According to jQuery docs
$(document).on( "ready", handler ), deprecated as of jQuery 1.8 and removed in jQuery 3.0. Note that if the DOM becomes ready before this event is attached, the handler will not be executed.
$( window ).load(function() {
alert("hello");
});
$(document).ready(function(){
$(document).on('click',function(){
alert("in click event");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>hello</div>
Window onload: :Is fired when all the content including images has been loaded
document.ready : Is fired after html document is loaded
So i guess you cannot combine all three events ready,load and click the way you have tried
Hope it helps

Related

Script loading: jQuery vs vanilla JS -- why a difference?

Why does vanilla JS's onload work where jQuery's load on does not when it comes to loading scripts?
So...
thisScript.onload=function Event triggers as expected.
$(thisScript).bind({load:function Event does not trigger
$(thisScript).on({load:function Event does not trigger
JS load and jQuery onload both work fine when it comes to loading
thisImg.onload=function Event triggers as expected
is the same as...
$(thisImg).bind({load:function Event triggers as expected
$(thisImg).on({load:function Event triggers as expected
...but not for scripts.
I'm aware of $.getScript but I'm curious about the above discrepancy.
Question Is there an event binding for jQuery that works for script loading?
The following test is revealing:
window.onload=()=>
var thisSrc, thisScript, thisTest;
thisSrc="testScript.js"; //See contents below
thisTest="JS";
//thisTest="JQ";
if(thisTest=="JS"){
thisScript=document.head.appendChild(document.createElement("script"));
thisScript.onload=function(){
alert("Event Triggered"); //EVENT TRIGGERS AND THE SCRIPT LOADS.
}
thisScript.src=thisSrc;
}else if(thisTest=="JQ"){
thisScript=$("<script>")
.attr({src:thisSrc})
// .bind({
.on({
load:function(){
alert("Event Triggered"); //EVENT DOES NOT TRIGGER BUT THE SCRIPT LOADS.
}
})
.appendTo(document.head)[0];
}
}
Contents of testScript.js:
alert("Script Loaded");
Both JS and jQuery successfully load the script. It's just the JQ event listener that doesn't trigger.
Resolved -- issue is order of commands.
src needs to be defined after the <script> element is in the DOM and the listeners are assigned.
So this works reliably...
$("<script>")
.appendTo(document.head)
.on({
load:function(){
alert("Event Triggered");
}
})
.attr({src:thisSrc});
Order of .on and .appendTo can be reversed, but have happen before .attr

When does $(document).load() execute? [duplicate]

What are differences between
$(document).ready(function(){
//my code here
});
and
$(window).load(function(){
//my code here
});
And I want to make sure that:
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
are the same.
Can you tell me what differences and similarities between them?
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Query 3.0 version
Breaking change: .load(), .unload(), and .error() removed
These methods are shortcuts for event operations, but had several API
limitations. The event .load() method conflicted with the ajax .load()
method. The .error() method could not be used with window.onerror
because of the way the DOM method is defined. If you need to attach
events by these names, use the .on() method, e.g. change
$("img").load(fn) to $(img).on("load", fn).1
$(window).load(function() {});
Should be changed to
$(window).on('load', function (e) {})
These are all equivalent:
$(function(){
});
jQuery(document).ready(function(){
});
$(document).ready(function(){
});
$(document).on('ready', function(){
})
document.ready is a jQuery event, it runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all the content.
window.onload fires later (or at the same time in the worst/failing cases) when images and such are loaded. So, if you're using image dimensions for example, you often want to use this instead.
Also read a related question:
Difference between $(window).load() and $(document).ready() functions
These three functions are the same:
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
here $ is used for define jQuery like $ = jQuery.
Now difference is that
$(document).ready is jQuery event that is fired when DOM is loaded, so it’s fired when the document structure is ready.
$(window).load event is fired after whole content is loaded like page contain images,css etc.
From the jQuery API Document
While JavaScript provides the load event for executing code when a
page is rendered, this event does not get triggered until all assets
such as images have been completely received. In most cases, the
script can be run as soon as the DOM hierarchy has been fully
constructed. The handler passed to .ready() is guaranteed to be
executed after the DOM is ready, so this is usually the best place to
attach all other event handlers and run other jQuery code. When using
scripts that rely on the value of CSS style properties, it's important
to reference external stylesheets or embed style elements before
referencing the scripts.
In cases where code relies on loaded assets (for example, if the
dimensions of an image are required), the code should be placed in a
handler for the load event instead.
Answer to the second question -
No, they are identical as long as you are not using jQuery in no conflict mode.
The Difference between $(document).ready() and $(window).load() functions is that the code included inside $(window).load() will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the document ready event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.
$(document).ready(function(){
})
and
$(function(){
});
and
jQuery(document).ready(function(){
});
There are not difference between the above 3 codes.
They are equivalent,but you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $ as a shortcut name.
jQuery.noConflict();
jQuery.ready(function($){
//Code using $ as alias to jQuery
});
$(document).ready(function(e) {
// executes when HTML-Document is loaded and DOM is ready
console.log("page is loading now");
});
$(document).load(function(e) {
//when html page complete loaded
console.log("completely loaded");
});
The ready event is always execute at the only html page is loaded to the browser and the functions are executed....
But the load event is executed at the time of all the page contents are loaded to the browser for the page.....
we can use $ or jQuery when we use the noconflict() method in jquery scripts...
$(window).load is an event that fires when the DOM and all the content (everything) on the page is fully loaded like CSS, images and frames. One best example is if we want to get the actual image size or to get the details of anything we use it.
$(document).ready() indicates that code in it need to be executed once the DOM got loaded and ready to be manipulated by script. It won't wait for the images to load for executing the jQuery script.
<script type = "text/javascript">
//$(window).load was deprecated in 1.8, and removed in jquery 3.0
// $(window).load(function() {
// alert("$(window).load fired");
// });
$(document).ready(function() {
alert("$(document).ready fired");
});
</script>
$(window).load fired after the $(document).ready().
$(document).ready(function(){
})
//and
$(function(){
});
//and
jQuery(document).ready(function(){
});
Above 3 are same, $ is the alias name of jQuery, you may face conflict if any other JavaScript Frameworks uses the same dollar symbol $. If u face conflict jQuery team provide a solution no-conflict read more.
$(window).load was deprecated in 1.8, and removed in jquery 3.0

bind function on submit in document ready

I am just learning javascript. How do I bind this function on submit in document ready?
jQuery(function($) {
$('form').bind('submit', function() {
$(this).find(':select').removeAttr('disabled');
});
});
Thanks
$(document).ready(function() {
/* your code here */
$('form').bind('submit', function() {
$(this).find(':select').removeAttr('disabled');
});
/* end your code */
});
It is as simple as that - once the document is "ready", the binding will be put in place - for more clarification, head over to the jQuery tutorial website for information regarding the $(document).ready() event: http://learn.jquery.com/using-jquery-core/document-ready/
You have two options with jQuery for a document "ready" event :
$(document).ready(): When your dom is fully loaded, jQuery will trigger the ready event.
$(document).load() : jQuery waits until your dom and all your declared assets are loaded. So if you rely on css properties for your javascript code, use this one.
For additional information, please take a look at : http://api.jquery.com/ready/

Target HTML generated by Javascript?

I have a slider button created using a JavaScript plugin, which automatically generates an element with class name .flex-next. However, when I run the following code, nothing is logged in my console:
$(window).load(function() {
$( ".flex-next" ).on( "click", function() {
console.log("youclick");
})
});
Since the button is added dynamically after the dom is loaded, you need to use event delegation so the click event can be used on this button:
$(document).on('click','.flex-nex',function() {
console.log("youclick");
})
Your setting your call to fire when the window loads by using $(window).load(...);. A flexsider is initiated on $(document).ready(...) which happens after the window loads and all of the content is loaded into the DOM. So when your script fires, it looks for an element that isnt there yet.
Get around this by firing your script on $(document).ready(), and use event delegation. The best practice way is to declare your function like so:
$(document).ready(
$(document).on('click', ".flex-next", function() {
console.log("youclick");
});
});
this way your click listener will wait until the page is ready and will put a click event on to any .flex-next event, even those created dynamically. That way if your using large imagery that is loaded asynchronously the code will still work.
You are probably calling your $(".flex-next").on call before the slider button has been executed. So, basically, your .flex-next class doesn't exist in the DOM yet when you call the .on
You should call the .on call after plugin has been initialized.

jquery "on" event not firing for click event?

For some reason I can't get my "on" event to fire for a click event. Here is what the call and HTML look like:
HTML:
<a class="cmt-replies-show" href="javascript:void(0)" id="cmt-count" style="">
<span>View All</span>
</a>
jQuery:
$('.cmt-replies-show').on("click", function(e) {
e.preventDefault();
alert("Clicked");
});
Any idea what I'm missing?
The most probable reason is that the element isn't in the DOM when you bind the event.
If you add the element dynamically, you may do this :
$(document.body).on("click", '.cmt-replies-show', function(e) {
If your script is included in the page before the element, you may either move your script at the end of the body or call your code on ready event :
$(function(){
$('.cmt-replies-show').on("click", function(e) {
e.preventDefault();
alert("Clicked");
});
});
What Paul said - make sure you bind the event after the DOM is ready.
FYI if you're directly targeting an element with 'on', you can just use $('a').click(function(){...}); . 'On' is more useful if you want to delegate events like so:
$('#container').on('click','a',function(){
});
You probably define the div after the script has executed.
Wrap it in $(document).ready(function() { .... }); to ensure it executes after the full DOM is available.
If you are trying to access element dynamically injected into DOM, you should use the following syntax:
$(document).on('click', '.cmt-replies-show', function(e) {
// your code goes here
});
The document can be replaced with each parent which is available when document is ready.
I understand the reason to be dynamic injection of this link on the page. Your DOM was already in ready state and all the functions were read when this part of code is injected.
When you inject the HTML, bind the element with click function.
Using live() should solve your purpose -
$('#yourLink').live('click', function(){
//Your logic here
});

Categories

Resources