Develop Reference

Run Function in jQuery on Page Load and Change

I have a function in jQuery that I would like to run on Page Load and on Change. How would I do this? I currently only have the change part..
$('input[name=INPUTNAME]').change(function(){
....
});

You can pass a function to your input change listener and also call the same function on document ready.
$(function() {
yourFunction();
$("input").change(yourFunction);
});
function yourFunction() {
alert("foo bar");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

Try
$(document).on("change", "input[name=INPUTNAME]", function(){})
Reference
http://api.jquery.com/on/

(function($) {
$(document).ready(yourFunctionName());
$('input[name=INPUTNAME]').on('change', yourFunctionName());
function yourFunctionName(){
//function body
}
})(jQuery);
Try this. Basically, we have a function and call it on input change and when the document is ready.

How to call the same function in two different ways?

I am trying to combine a function which will display alert (ofcourse I have a lot of code In this function but for this case It will be alert) after:
Click on element with class .number
Change select[name=receive]
I have this code but it doesn't work:
$(document).on(("click",".number"),("change","select[name=receive]"),function(){
alert('test');
})

Try this
function doMyWork() {
console.lot( 'TEST' );
}
$('.number').on('click', doMyWork);
$('select[name=receive]').on('change', doMyWork);
Or, if your elements are inserted after DOM ready:
You do not have to use this form if the target elements exist at DOM ready
function doMyWork() {
console.lot( 'TEST' );
}
$(document).on('click', '.number', doMyWork)
.on('change', 'select[name=receive]', doMyWork);

Try this
$(document).on("click change","select[name=receive], .number", function(){
alert('test');
});
Or
var fn = function () {
alert('test');
}
$(document).on("click", ".number", fn);
$(document).on("change", "select[name=receive]", fn);

You cannot separate events and selectors in a single .on() call. You have two options here. You can use them together....
$(document).on("click change", ".number, select[name=receive]"),function(){
alert('test');
});
...however this means that .number will listen to both click and change, possible resulting in the function running 2 times.
You need to move the function outside and reuse it for every handler
var al = function(){
alert('test');
};
$('.number').on('click', al);
$('select[name=receive]').on('change', al);

$(document).on("click change",".number, select[name=receive]", function(){
alert('test');
})

I am not sure where you learned that syntax, but that is not how on() works.
Use a named function and share it.
(function(){
var shared = function(){
console.log(this);
}
$(document)
.on("click",".number", shared)
.on("change","select[name=receive]", shared);
}());

call many functions on document change

I have few namespaces and I want to reinitialize function inside namespaces on document change in order to be reinitialized every time when the document is modified (*modified = adding/removing new sections on existing dom ).
I have tried this but not working so far:
;namespaceName= {
namespaceFunction1: function() {
$( selector ).on('click', function() {
//my first function run here
})
},
// ************second function in namespace***************/
namespaceFunction2: function() {
$(secondSelector).on('click', function() {
//my second function run here
})
}
}
$(document).on('change', namespaceName.namespaceFunction1() );
$(document).on('change', namespaceName.namespaceFunction2() );
Pls help, ty.

Try this...
$(document).on("DOMSubtreeModified", function () {
namespaceName.namespaceFunction1();
namespaceName.namespaceFunction2();
});
It fires your 2 functions on the DOMSubtreeModified event, which is basically what you were looking for - when the DOM changes.

sounds like you need to listen for the DOMSubtreeModified event like this:
$('body').bind('DOMSubtreeModified', function(){
//your code here
});

check if a function is ready

what i'm trying to do is to show when the function its done/ready the process ... i try this code but didn't work ... i try with ".done" but still didn't work ... how i can see when the function its ready ?
this is the code what i try ...
HTML:
<div class="Load_Div"></div>
<br /><br />
<div class="Result_Data"></div>
Jquery:
function Load_HTML() {
$('.Load_Div').load('file.php', function() {
});
}
Load_HTML().ready( function() {
$( ".Result_Data" ).text( "Function Ready" );
} );
This is the code:
http://jsfiddle.net/w9Xf5/

Only the document has a ready() method, no other elements, functions or whatever has a ready method.
As for your function, that is always ready, but as you're doing ajax, what you're really trying to do is check if the ajax call is finished, and jQuery has built in callbacks and deferreds (which load() does not seem to expose, so done() won't work) for this :
function Load_HTML(callback) {
$('.Load_Div').load('file.php', callback);
}
Load_HTML(function () {
$(".Result_Data").text("Function Ready");
});

You could create your own callback
function Load_HTML( callback ) {
$('.Load_Div').load('file.php', callback );
}
And then
Load_HTML( function() {
$( ".Result_Data" ).text( "Function Ready" );
});

Get rid of the Load_HTML().ready() and insert $( ".Result_Data" ).text( "Function Ready" ); into the callback function from your .load() method.

You could use a Deferred-object and give this a lot of functions like additional loading of php-script to process. After each call of the array of functions the process can be evaluated. Please take a look an this JQuery-API for further informations.

jquery: function to end another function

$('#start') executes the function myFunction() and $('#stop') end it. How do I stop myFunction() from executing?
function myFunction() {
$(document).mousemove(function(e) {
$('#field').html(e.pageY)
});
}
$('#start').click(function() {
myFunction();
});
$('#stop').click(function() {
//stop myFunction
});

As Daniel pointed out, you actually want to unbind the event handler. You can use unbind for this:
$('#stop').click(function() {
$(document).unbind('mousemove');
});
But this will also remove all other mousemove event handlers, that might be attached by other plugins or similar (I mean, you attach to the document element not a "custom" element, so it can be that other JavaScript code also binds handlers to this element).
To prevent this, you can use event namespaces. You would attach the listener with:
function myFunction() {
$(document).bind('mousemove.namespace', function(e) {
$('#field').html(e.pageY);
});
}
and unbind:
$('#stop').click(function() {
$(document).unbind('mousemove.namespace');
});
This would only remove your specific handler.

You want to use the jQuery bind and unbind methods. For example:
function myFunction() {
$(document).mousemove(function(e) {
$('#field').html(e.pageY)
});
}
$('#start').bind('click.myFunction', function() {
myFunction();
});
$('#stop').bind('click', function() {
$('#start').unbind('click.myFunction');
});

You're not stopping the function from executing. Your myFunction() simply attaches a callback to an event listener, which is called whenever the mouse is moved on the document. The callback function is invoked and is terminated immediately.
You'd simply want to unbind the callback from the event listener. Check out the other answers for concrete examples.

A better way would be to use bind and unbind, like so:
function myFunction() {
$(document).mousemove(function(e) {
$('#field').html(e.pageY)
});
}
$('#start').bind('click', myFunction);
$('#stop').click(function() {
$('#start').unbind('click', myFunction);
});