Develop Reference

jQuery off() Before Form Submission

I'm learning how to use jQuery and I'd like to understand what the purpose of using the off() method before submitting a form is. For example, in the following code, the form is first prevented from sending using preventDefault(), some Ajax is done and when finished, the form is finally submitted. But why do I need to use off() before submit()?
$(document).ready(function() {
$('form[name="Payment"]').on('submit', function( e ) {
e.preventDefault();
AjaxCall();
$(document).ajaxStop(function() {
$('form[name="Payment"]').off('submit').submit(); // Once Ajax request are finished, submit the form.
});
});
});

Because triggering the same event would run all that same event handler code again.
The default would always be prevented, the ajax would be called ....and then the event would be triggered again and you would have an infinite loop without changing something.
Removing the event listener would make any subsequent submit use browser default process
There are other ways around this...but this answer explains what was asked

Jquery click event fire twice

I am building something with Jquery, and I am making some Ajax calls. So after my ajax calls, I need to call functions to trace clicks on some elements again. Here an example of such a function:
$(document).ready(function () {
initSomething();
});
function initSomething(){
$('.something').click(function(){
alert('hello');
});
}
And now an ajax function:
$('#AddSomething').click(function(){
$.post('somewhere.php',{data},function(data){
initSomething();
});
});
And the problem is: I feel like when I initSomething(); for the second time, it's like it's readding a click event on the elements already traced by the first initSomething called on document ready.
So I tried something like e.preventDefault and e.preventPropagation(), but it doesn't seem to work, what am I missing?
Thanks for your answers and have a nice day!
EDIT: As saw on the answers, I forgot to say that the Ajax call is inserting new .something elements in the DOM...
EDIT 2: Here a jsfiddle: https://jsfiddle.net/wpsnz7op/

Try .off() api to remove the already attached event and reassign the event like following.
function initSomething(){
$('.something').off('click').click(function(){
alert('hello');
});
}
Hope this helps....

There is no need to rebind clicks from what I can see of the code you have there.
Just do not rebind and you will not have a multiple click issue.

Use event delegation instead of that.
$(document).on('click','.something',function(){
alert('hello');
});
Then there is no need for calling the initSomething(); function after ajax.

Binding onbeforeunload and unload and removing the other once one fires

So, I am using onbeforeunload but i understand on safari you can't run an ajax with it... I need to do that. So, for those browser that don't support unbeforeunload, I'll use unload.. but, I don't want two firings of my ajax for those browsers that support both.
So, just to be clear. I need to fire an ajax request once the user "leaves/refreshes" the page. I need a solid way in most popular browsers and ie8+.
Can someone help me out on how I can remove the other binding once one fires?
ala
window.addListener('onbeforeunload', function(){
// run ajax
})
window.addListender('unload', function(){
// run ajax
})
whichever listener fires first, fires and then unbinds the other that is set. I am thinking that i don't want to unbind "all" unloads or onbeforeunloads on my site/page.. just the ones i set.. Can I set a namespace like you can in jQuery? ala... onbeforeunload.myBind etc...
Any help would be unappreciated.

Since you are using jquery, you can do this:
$(document).bind('beforeunload', function () {
// ajax
$(document).unbind('unload');
}).bind('unload', function () {
//ajax
$(document).unbind('beforeunload');
});

What jQuery event is called right after $(document).ready()?

I have lots of HTML generated on $(document).ready(). I have a simple window system. But not only it is generated on $(document).ready() - also some HTML elements (different JS files put stuff into $(document).ready() ). I want my window system to be generated after $(document).ready() is called. So how do I handle a function to be called after all the code registered in $(document).ready() is completed?

$(window).load(function(){
//some code after ready
});

There is another event which is fired later. it's $(window).load(); This is fired after all resources are loaded.
But perhaps you want this:
function loadWindowSystem(){
// load window system here
}
$(document).ready(function(){
// do some html stuff here
loadWindowSystem();
})
This way you can separate your code in functions.

I usually don't advocate using setTimeout, but you can build on top of #jfriend00's answer to create a more abstract approach:
$(document).ready(function() {
setTimeout(function() {
$(document).trigger('afterready');
}, 1);
});
$(document).bind('afterready', function() {
// call your code here that you want to run after all $(document).ready() calls have run
});

If you want something to fire right after all $(document).ready() calls, you can put this once anywhere in your page:
$(document).ready(function() {
setTimeout(function() {
// call your code here that you want to run after all $(document).ready() calls have run
}, 1);
});
This will get called along with all the other document.ready calls, but it sets a short timeout that will execute after all the other document.ready calls have finished.

By adding another handler function ones the document is ready, the
handler will almost certainly be last one in the ready event queue. Effectively giving you an instant "post" ready handler function.
$(document).ready(function() {
$(document).ready(function() {
// code to run "after" ready
});
});
$(document).ready
When multiple functions are added via successive calls to this method, they run when the DOM is ready in the order in which they are added.
Note that this will only work as long as no ones else uses this "trick".

there is nothing after this function , so if you have some ajax loaders, only think you can do is to wait for all of them and then start rendering
EDIT But i wonder why you dont just structuralize your code to eliminate this.

$(document).ready() is called just after the DOM has finished loading.
pageLoad() is called next on a 0 timer, but beware it is run after every partial postback.
Edit: Added side note - this will only count if using ASP.NET, the pageLoad functionality mentioned is separate from jQuery. See more info Here

You can use
$(window).on('load', function () {
alert("Window Loaded");
});
$(window).load(function(){
alert("Window Loaded");
}
has been removed from jQuery.

Refire the jQuery ready event?

I am using the jQuery $(document).ready() event on page. All is fine, except that
if I am loading data using Ajax calls, the $(document).ready() event does not fire. I guess that it behave in such way because the page was already loaded and I am just adding more data from the Ajax response to the DOM.
How can I refire the ready event?

If you need to execute some additionnal Javascript, you might use a function that you call upon Ajax callback onComplete event :
function initJS(){
//your code here
}
$.ajax({
url: 'ajax/test.html',
success: function(data){
},
complete: function(){
initJS();
}
});

.load(), .bind(), or .live() will be your friends here....

just break the logic that is in the "$(document).ready( function() {});" block out into a separate function. Then the page will call it once when it is "ready", and you can directly call that function when you want to do a refresh.

I think the person asking is because most developer doing jQuery plugins i.e wordpress plugins use the "ready" function.
Everyone here is saying go modify the plugins !
I'm facing the same problem as I'm developing AJAX template for wp and most plugins don't work !