We Keep Coding

jQuery off when on was defined with anonymous function

I have a function that registers an event handler with a callback that will receive only some of the event data.
My problem is I want to protect against the function registering multiple time by calling .off before .on but I'm not sure how to specify the callback to .off in this case as it has to be the same function used by .on
For example:
function myclick(elem, callback) {
//elem.off('click', ???? ); // how should this be specified
elem.on('click', function (e) {
callback(e.target);
}
}
I am looking for a general solution that is not jQuery dependent as this can happen with any library that provides on and off functionality.

One way to do this is to use event namespacing which will make sure that only the handlers with the given namespace is removed others are not.
function myclick(elem, callback) {
elem.off('click.myradomnamespace').on('click.myradomnamespace', function (e) {
callback(e.target);
}
}
But if you are doing this to handle dynamic element's use event delegation

The next param is the delegate(function) you was passed before, if you dont know which delegatewas passed before, just simple pass '**' to delete all delegate:
elem.off('click', '**');
For more refer: http://api.jquery.com/off/
Hope this can help you!

jquery change event callback

How to call a function once after change() event complete?
for example, something like this: ( I know jQuery Doesn't have callback method as default )
$('#element').change( function(){
// do something on change
// $('#milestonesSelect').multiselect({ minWidth: 120 , height : '200px' ,selectedList: 4 }).multiselectfilter();
// some animation calls ...
// ...
}, function(){
// do something after complete
alert('another codes has completed when i called');
}
);
Is it possible to call a single callback after all the codes on change method done, except call a complete callback for every functions on it?
I need to do something after the change event has completed
Shall I need to set order to methods in change handler?

You can probably make use of event bubbling and register a callback in the document.
$(document).on('change', '#element', function(){
console.log('after all callbacks')
});
Demo: Fiddle

I just spent some time exploring this myself, and decided to submit my answer to this question as well. This is not utilizing any of jQuery's deferred methods, which might be a better approach. I haven't explored them enough to have an opinion on the matter.
$("#element").change(function() {
handler().after(callBack($("#element").val()));
}
function handler() {
alert("Event handler");
}
function callBack(foo) {
alert(foo);
}
Demo: JSFiddle

If I understand your question correctly, this will execute code only one time after a change event is fired:
var changed = false;
$('#element').on('change', function() {
if ( !changed ) {
// do something on change
changed = true;
}
}
});

How to fire an event immediately?

I'm binding an event like this, using prototype js:
$('country').observe('change',function(e) { ... });
How can I fire it once immediately?
in jQuery, I'd just tack on a .triggerHandler('change'). Is there something similar in prototype?

Use the load event. Something like this:
// calls addListeners when the document loads
Event.observe(window, 'load', addListeners, false);
function addListeners() {
// called onLoad
fireOnce();
// observer for the country dropdown
$('country').observe('change', function(event) {
fireOnChange();
});
}
function fireOnce() {
// do something
}
function fireOnChange() {
// do something
}
When the document loads, fireOnce() will execute. I use this technique all the time.

If using an extension is an option, I have had success in the past with event.simulate for this purpose.
It'll allow you to do something like:
$('country').simulate('change');

Try this:
var handler = function(e) {...};
$("country").observe("change",handler);
handler();
Alternatively (less readable, avoids temporary variable):
$("country").observe("change",(function(e) { ... return arguments.callee;})());
However, in both cases you will not be able to use this as you might expect. This solution is better suited to more general callbacks such as for setInterval

...if you know that it exists, and you know that you're not waiting for pageload or waiting for a script to load, why not just:
(function (el) {
if (!el) { return; }
doSomething(el);
}(document.getElementById("country")));

JavaScript function fired?

I'd like to ask somthing that maybe is wrong, but I not sure.
Is there a way to know when a specific function is executed, in order to run a sample of code? I like to make it like an event.
The problem I have is the thick box. I like to resize the thickbox according to the image that display.
To do so, I need to know when the thick box is executed.
Any idea please ?

Thickbox use global function, so you could do below: (As #alex suggested.)
(function($) {
var original = tb_show;
tb_show = function () {
$(document).trigger('tb_show');
return original.apply(this, arguments);
}
})(jQuery);
Then you could bind the event:
$(document).bind('tb_show', function() {
//event handler
});

You could overload the thickbox plugin invocation.
I'm going to assume it is called on a collection with thickbox(), e.g. $('.container img').thickbox().
(function($) {
var original = $.fn.thickbox;
$.fn.thickbox = function() {
// Whatever you need to do here.
return original.apply(this, arguments);
}
})(jQuery);
Now, when you call...
$('.container img').thickbox()
...the code will call your new function before handing the control over to the original function.
You can do whatever you want where it says // Whatever you need to do here. :)

I am not a JS developer but you can create a callback function and make it execute when that specific function is executed.
You can find a good explanation here: JavaScript Callback Scope

Pass function to jQuery .ready() function

I am currently making use of Simon Willson's addLoadEvent function to add functions that I want to run after the load event. I ran into a problem wherein the the function I passed to the addLoadEvent function referenced a div that had not yet been loaded by the DOM and so my action (showing the div) did not do anything. When I changed to using the jQuery $(document).ready function, the div has been loaded by the DOM and I can execute actions with it (make it show up).
So, a couple questions. Why is my function being executed before the DOM has completed loaded using the above function? Is there a way to delay it? The other alternative that I can think of is passing in a function to a jquery equivalent:
function jqueryAddReadyEvent(myFunc)
{
$(document).ready(function()
{
//execute already existing functions
//add a new function to the ready event
myFunc();
}
}
When I try the above code, I get a javascript error "myFunc is not a function". Is there a way to generically pass in a function to the jquery ready function and have it execute? Equivalent to the following:
$(document).ready(function()
{
funcA();
}
$(document).ready(function()
{
funcB();
}
...//more of the same
Replaced with the following:
jQueryAddReadyEvent(funcA);
jQueryAddReadyEvent(funcB);

You can just do:
$(document).ready(myFunc);
to attach functions to the DOM ready event. Here's the fiddle: http://jsfiddle.net/padtE/

If you will require many functions to be added then I suggest you do the following:
Create an array that will old all the functions you want to call.
Add functions to that array as you please.
In the .ready(function() { ... }) call every function in that array.
You're set.

It looks correct to me. Most likely you are calling it with something not a function.
Btw you can shorten this to:
var jqueryAddReadyEvent = $(document).ready
or just use $(document).ready() directly for the same effect, as it specifically does what you want to do, run functions after the load, and is actually shorter.
$(document).ready(funcA);
$(document).ready(funcB);

function jqueryAddReadyEvent(myFunc) {
$(myFunc);
}
jqueryAddReadyEvent(function() {
alert('hello world');
});
Demo: http://jsfiddle.net/AlienWebguy/UzMLE/