We Keep Coding

Keypress is not called anymore after form inside jquery ui modal box is hidden

I have a jquery UI modal box that contains a form.
I declared keypress event to handle Enter being pressed.
If I hide the form contained in the modal box, the keypress event is not called anymore.
This behaviour is reproduced here: https://jsfiddle.net/patrick29/jqp4wp77/
$('.dialog').on('keypress', function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
submit();
}
});
function submit() {
alert('ok');
$('.dialog form').hide();
}
First time Enter is pressed I receive ok message. Then form is hidden and second time Enter is pressed I do not receive ok message anymore.
Do you know why and how I can hide form and still have keypress event work ?
Thanks!

You can do something like this instead of .hide();
$('.dialog form').css({
opacity: 0
});
https://jsfiddle.net/nr5fptd2/1/

To have a keypress handler on a container, you need to have inside an element that supports keyboard interactions, like an input. No elements inside the .dialog div support that once you hide the form. More information here: http://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/
Adding $('.dialog').append('<input/>'); in your submit function, for example, will make the event work. Of course, I don't recommend it.

jQuery change event is not working as expected

I have added change event on the input field so that whenever user enters the text into it, so other task should happen, it works but when i click outside the input field.I don't know whether it is default behavior or i am doing some thing wrong. I tried using keyup and keydown events and it works as expect.
Please suggest.
Here is my code:
$("#mobile-number").on('change',function(){
// some other code
});

The change event fires when an elements value changes.
For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
In other words, on an input, the change event fires when the element loses focus, not when you type, and that is the default behaviour.
That's why there are key events as well, and on modern browsers you can catch most changes to an input with the input event
$("#mobile-number").on('input',function(){ ...

Yes, it is the desired behavior.
Change Event
The change event is fired for , , and
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
Depending on the kind of form element being changed and the way the
user interacts with the element, the change event fires at a different
moment:
When the element is activated (by clicking or using the keyboard) for and ;
When the user commits the change explicitly (e.g. by selecting a value from a 's dropdown with a mouse click, by selecting a
date from a date picker for , by selecting a file
in the file picker for , etc.);
When the element loses focus after its value was changed, but not commited (e.g. after editing the value of or ).

Try using input event:
$(function() {
$("#mobile-number").on('input', function() {
$("#copy").val(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type='text' id='mobile-number' />
<input type='text' id='copy' readonly/>

Try this:( If i really understand your problem )
jQuery(document).on('change', '#mobile-number', function() {
// some other code
});
for type event:
jQuery(document).on('keyup', '#mobile-number', function() {
// some other code
});

You should provide your selector to the .on function:
$(document).on('change', '#mobile-number', function() {
// some other code
});

Conflicts of blur and submit/click events

I have two items
item1 is textbox
item2 is submit button
Now item1 has blur event in jquery. In that blur event I have validation and based on that validation if it fails user will have confirmation message.
So if user press yes he can proceed futher
if user press no that textbox will be blank and need to enter detail again.
So now my issue is that if user enter detail in item1 and directly click on item2, button's submit event rejected and item1's blur event called. So first time is rejected and user have to press 2nd time on button(This is the issue).
So how to know in item1's blur event if user click on item2 than I can proceed further with triggering item2's click event.

Consider this code
var $item1 = $('#item1');
var $item2 = $('#item2');
$item1.on('blur', function (oEvent) {
if ($item2.is(oEvent.relatedTarget)) {
// your blur is caused by click on $item2 a.k.a submit button
} else {
// your blur is caused by smth else
}
});
It checks where your focus was moved and you can add some specific boolean flag to use later on in your submit handler or maybe change your validation somehow.
Please note that blur event is event of loosing focus, focus can go away not only because of clicks, but also because of tab-navigation for example.
UPDATE:
added a jsfiddle http://jsfiddle.net/DbjQc/
Try focusing the text input and then clicking somewhere else. After that try focusing the text input again and then click the submit button - you will see how behavior changes.

Javascript: change event getting fired when input field loses focus

I have input fields on my page and I detect when the user types something to enable the Save button. I also have enabled a shortcut Ctrl + S to let the user save. Whenenever data is saved, the Save button is disabled.
However I have a dilemma. If the user changes the text in an input field, does a Ctrl + S and then moves to another input field using the mouse, the "change" event gets fired for the input field that the user changed and this in turn causes the Save button to get enabled again. The Save button should not be enabled because no changes have taken place after doing a Ctrl + S. What it appears is that the change event is fired not just with changes in text but also when the focus is moved to another field.
$("input.SaveMe").live('keypress change', function ()
{
// Code goes here to enable Save button
});
How can I prevent the change event from taking place after saving. I thought of using some kind of flag but I can't figure out how.

You can ignore the event when that particular input is not in focus, in the following manner.
$("input.SaveMe").live('keypress change', function() {
if (!$(document.activeElement).id == 'id_of_input') return; //if (!$(document.activeElement).hasClass('SaveMe')) return;
// Code goes here to enable Save button
});

Removing the detection for "change" takes care of the problem but this now prevents users from pasting text into a field and detecting the paste as a change. To fix that use:
$(document).bind('paste', function (e)
{
// Add code to update flag to indicate data changes and enable the Save button.
});

DOM problem with click initiating a focusout event on a different input

I have an <input type=text> with focusout event handler
I have a <button> with click event handler
Focusout checks whether format in input box is correct. It does so by testing input value against a regular expression. If it fails it displays a message (a div fades-in and -out after some time) and refocuses my input by calling
window.setTimout(function() { $(this).focus(); }, 10);
since I can't refocus in focusout event handler. focusout event can't be cancelled either. Just FYI.
Click collects data from input elements and sends it using Ajax.
The problem
When user TABs their way through the form everything is fine. When a certain input box failes formatting check it gets refocused immediately after user presses TAB.
But when user doesn't use TAB but instead clicks on each individual input field everything works fine until they click the button. focusout fires and sets time-out for refocusing. Since time-out is so short focusing happens afterwards and then click event fires and issues an Ajax request.
Question
I have implemented my formatting check as an independent jQuery plugin that I want to keep that way. It uses .live() to attach focusout on all input fields with a particular attribute where format regular expression is defined.
Data submission is also generic and I don't want to make it dependant on formatting plugin. They should both stay independent.
How can I prevent click event from executing without making these two plugins dependant?
Example code I'm fiddling with
After some searching I've seen that all major browser support document.activeElement but I can't make it work in Chrome. FF and IE both report this being the active element, but Chrome always says it's BODY that is active even though click fired on the button element.
Check this code http://jsfiddle.net/Anp4b/1/ and click on the button. Test with Chrome and some other browser and see the difference.

You could use a flag...
Live demo: http://jsfiddle.net/Anp4b/4/
So your question is:
How can I prevent click event from executing without making these two plugins dependent?
Well, you obviously cannot prevent the click event. If the user wants to click the button, he will, and the click event will trigger. There's nothing you can do about that.
So the answer to the above question is: You cannot.
Based on the current conditions, you have to - inside the click handler - retrieve the validation result, and based on that result, decide if form submission should or should not occur.
JS Code:
$("#Name").focusout(function(){
var that = this;
valid = this.value.length ? true : false;
!valid && window.setTimeout(function() {
$(that).focus();
}, 0);
});
$("#Confirm").click(function(e) {
if ( !valid ) { return false; }
e.preventDefault();
alert('AJAX-TIME :)');
});
HTML Code:
<input type="text" id="Name">
<button id="Confirm">OK</button>

Is there are reason you use .focusout instead of .blur?
Using a flag is a good idea, but I would rather use a class on the element. By using classes to determine the state you can also style it accordingly. Here's my example based on your fiddle.
Another solution that hopefully gives the result you are looking for.
1) Create a named click handler:
var clickHandler = function(e){ /** submit form or whatever you want to do**/ };
$("button").click(clickHandler);
2) Add the following to the focusout event when it's failing validation:
$("button").unbind("click", clickHandler).one("click", function(){ button.click(clickHandler); return false;});
You can find an example of this here.