jQuery change() fires on Page Load - javascript

This code fires on the page load, but not when the change event actually occurs.
jQuery('select#order_note_type').change(function() {
//random code here
});
I have to add that it is not inside the ready method. Do I need to bind it?
EDIT: I changed my code to be inside the $(document).ready() and used bind, but I still get my method to fire only at page load:
jQuery(document).ready(onReady);
function onReady() {
jQuery('select#order_note_type').bind('change',showTrackingInfo);
}

$(document).ready(function() {
$('select#order_note_type').bind('change',showTrackingInfo);
});

I had the same problem. In my case it was because I was firing some events on the controls after the code for the change event. So I suggest you try and move this change event to the end of your script, and also include this script last in the page.

Related

jquery event trigger not working

I have two scripts.
The first script holds a prototype class of a game. This class is with use strict and isn't surrounded by document ready. The trigger:
$("#trigger").trigger("noPossibilities");
In the second script, which also has use strict, I try to catch the trigger:
$(document).ready(function() {
$("#trigger").on("noPossibilities", function() {
console.log("noPossibilities trigger");
});
});
The problem is that I can't catch the trigger. This has probaly something to do with use strict/scope but I can't seem to find a way around this.
Really hope someone can help me
UPDATE
The first script has a prototype class.
This class is getting instantiated in the second script. After the handler. Then it still doesn't work because the first script is loaded before the second script?
Also when I execute this line from the console:
$("#trigger").trigger("noPossibilities");
It doesn't get triggered. Shouldn't it work this way?
UPDATE 2
I found the problem. The first script adds the element with id trigger to the document when it is instantiated. I have a popup at the beginning of the game. Now the handler is getting attached on the click of that button.
The document probaly didn't have the element on which the handler should have gotten attached to. Now it is being attached later on and now it's working.
The issue is not with the scope, you are triggering the event before the handler is attaching to the element. The code inside document ready handler executes only after the DOM elements are loaded. In case you are triggering immediately after the script then it won't work since the elements are still loading.
You can check the working of triggering within a different context by moving it to another document ready handler(to execute only after handler attached).
$(document).ready(function() {
$("#trigger").on("noPossibilities", function() {
console.log("noPossibilities trigger");
});
});
$(document).ready(function() {
$("#trigger").trigger("noPossibilities");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="trigger"></div>

When to use $(function() {}) when registering click handlers with jQuery?

What is the difference between
$(function()
{
$(".some").click(function()
{
...
});
});
and
$(".some").click(function()
{
...
});
I know from here that $(function() is shorthand for $(document).ready(function(). But why are we waiting for the document to be ready? Will the function not be only called when some is clicked anyway?
Note: #2 does not work in my case.
The difference is that #1 waits for the DOM to fully load before running the JavaScript.
The second code runs the JavaScript when it receives it which means it looks for .class elements before they have finished loading. This is why it doesn't work.
You need the document to be ready, i.e. all elements of the document to be available, before you can add an event listener to an element.
The reason is: consider a button, and you want an event listener (listening for the click event, for example.
When your sript runs but the button is not yet present, the attempt to attach the listener will fail. As a result, the associated function cannot be called once the button is actually clicked.
Does that answer your question?
You use the $(function()) simply because you need the DOM to fully load.
For example you have a button and you want to add some action on click. You click the button, but nothing happened, because the button was handled prior to the DOM loading.
If you won't check that the DOM is fully loaded, some unexpected behavior might occur.
Please do not confuse between onload() to ready(), as on load executes once the page is loaded and ready() executes only when the DOCUMENT is fully ready.
$(function(){...}) triggers the function when the DOM is load, it's similar to window.onload but part of jquery lib.
you can also use $(NAMEOFFUNCTION);
It's there to be sure the event has a element to listen to.

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 load() dynamic content with clicks get fired as many times as loaded

I load content via jQuery load() but for each time I load a given page, the clicks on the pages gets fired multiple times. Why??
Se the fiddle here:
http://jsfiddle.net/ZUZ3L/ph3tH/2/
Simply put your click hander outsie of load:
$(document).ready(function() {
function loadContent() {
$(".ajaxContainer").load("http://fiddle.jshell.net/ #actions", function() {
alert("Done");
});
}
$(".load").click(loadContent);
loadContent();
});​
Updated Fiddle
Each time you load content, you execute this line:
$(".load").click(loadContent);
which adds a new event handler to the list of event handlers to execute whenever .load is clicked. You execute your function three times, now you have three identical handlers all triggering for each click.
It's because you're adding the click event multiple times.
Every time your code runs, the click function is re-defined. When a click is redefined it won't replace the previous one, but instead will be added to the stack to be executed each time the "click" event occurs. This is applied to all events in jQuery.
As you are loading via AJAX the vars and events in the document are still persisted. Meaning that you are just adding layer on top of layer of function calls to be executed each time you run your ajax call
because you are calling the function 2 times, try this:
$(document).ready(function() {
function loadContent() {
$(".ajaxContainer").load("http://fiddle.jshell.net/ #actions", function() {
alert("Done");
});
}
loadContent();
$(".load").click(loadContent);
});
http://jsfiddle.net/ph3tH/4/

unbinding hover() - not the normal case

I have a jQuery that, whenever the document is ready, binds a hover event with a handler to an element with the class="widget-box". The issue is that once the document is ready, the hover event handler gets binded, but when the user clicks a button on the page, ajax is used so that part of the page is reloaded and then document ready causes the hover event to be binded again to the same element. I don't want this behavior to occur and only want the hover event to be binded once. I've tried to unbind hover() whenever document ready gets called again with unbind('mouseenter') and unbind('mouseleave') but somehow, that doesn't work to remove the hover that is already binded. Does anyone have any ideas as to how to fix this?
Thanks!
You may have done something wrong. Do it this way:
$(".widget-box").unbind('mouseenter mouseleave').bind('hover', ...);
Hope this helps. Cheers
try using the .live() method:)
to qualify:
why are you loading the same javascript twice? if you only load it once, and use .live rather than .hover you can still attach your events to pertinent elements without having to run the js again.
EDIT:
have you considered just wrapping your code in something like:
if(document.myScriptIsLoaded!=true){
document.myScriptIsLoaded=true;
//put your document ready here
}

Categories

Resources