We Keep Coding

Event handlers not working correctly in jsfiddle

Trying to make a jsfiddle so I can post it on here and get some help with a problem; however, I'm having a problem getting jsfiddle to act as expected, so I'm having a problem trying to document my problem!
http://jsfiddle.net/eidsonator/he4Vc/#base
I'm trying to add a blur event handler to a input with id of "part". My alert fires as soon as the page loads (which it shouldn't) and doesn't fire when focus is lost. This behavior persists in chrome and in firefox (I'm coding for an internal web app, so I can ignore ie!)
$("#part").on('blur', alert('lost focus'));
I've changed the load method, and tried wrapping it in my own $(document).ready(function() {}); as well as using .blur() and different versions of javacript... any clues?
Thanks!

You are calling alert straight away, and passing the return value of it to the .on() method. Instead, you need to pass a reference to a function that can be invoked when the event is received:
$("#part").on('blur', function () {
alert('lost focus')
});
Here's an updated fiddle.

you have written a wrong syntax .see the docs for more info,and change your code to
$("#part").on('blur', function(){
//do something
});

Javascript conflict with onclick and onmouseout

Hi and thanks for looking at my post. I'm very new to scripting, and I'm having a simple problem that I can't figure out. So...
I have a button that freezes up when I press it, and its "onclick" function doesn't get triggered. There is a "onmouseout" function that is causing this, but I don't know why.
I'd like "onmouseout" and "onclick" functions to apply to one button, but it's not working. Please see my code:
Javascript:
function popup()
{
alert("Hello World")
}
function pop2()
{
alert("Good job")
}
function pop3()
{
alert("CLICK ME!")
}
HTML:
<input type="button" onclick="popup()" value="Hello World">
<input type="button" onclick="pop2()" onmouseout="pop3()" value="click me">

Adjusting your code to isolate and provide detail to what's going on, I've prepared the following:
http://jsfiddle.net/238Nz/8/
Skip below this part for the answer. This is intended for Mark.
Let's ignore whether or not using on* attributes to add handlers is considered good or bad$. Also, let's use some logging to check the order. I am using console.log() to send messages to the browser's Javascript console. In Firefox, I use Firebug, and Chrome has a built-in console. In both, right-click on the page and Inspect Element, then choose the Console tab for these tests.
One more thing: jsFiddle can be a little complicated to figure out at first. The Javascript in the bottom, left pane is actually put within the head block above the input (and body tag) within the source. Right-click and View Source on the bottom, right (Result) pane and you'll see what the browser is using. It's just like your own example HTML document, just reordered for jsFiddle. Try not to be confused by how that works, though.
The markup I am using to test your problem is the following:
<input type="button" onclick="doclick()" onmouseout="domouseout()" value="Click">
Notice I plainly label my functions and use descriptive error messages. This helps me keep track of what is going on by embedding that detail within the code and the message log information. Always try to be descriptive in your labels (function, var, log information, etc.), instead of doing things like yay! or what happened. It's simply too hard to follow once your scripts get to be longer and more complex.
Next, I used the following function to narrow down and consistently replicate the same action:
function popup(msg) {
// Note, console.log is first here. This is so that the
// alert does not "steal" focus before I get any result.
console.log(msg);
// Now, let's try the alert. Notice, the same msg is used.
alert(msg);
}
This allows me to call both console.log and alert in a specific order, from both event handlers. Next, I establish my two event handler functions:
function doclick() {
popup('onclick fired');
}
function domouseout() {
popup('onmouseout fired');
}
See, all they do is call popup() with an action-specific log message about what was supposed to happen. Since alerts are designed to "focus" to the user and block interaction, which appears to be a possible cause of the "frozen" browser frame.
What I do next is try this in different browsers. Always try to replicate and test across different browsers#. In this case, I notice a big difference between two...
Chrome: Does not block processing; both alerts fire, and the onmouseout-fired alert is not run through console.log until after I hit Ok on the alert and and I move the mouse pointer off of the input element. This, it seems, is the desired outcome. Right?
Firefox (17.0.1): Firefox does show the behavior you're describing. Note, when I click on the button, I get both doclick and domouseout() called at the same time. So Firefox is detecting the onclick as taking the mouse pointer away from the button, and you get the "freeze". If you watch the console, you'll see both logs fire immediately, and you seemingly get no alert to interact with (by clicking Ok).
IE (7-9, 9 Compatibility View): IE of course provides an interesting illustration. For instance, when I click the button in IE9, I see:
http://i.imgur.com/sWXWm.png
Which of course appears to be the same effect Firefox is having... But for some reason with Firefox, the onmouseout-fired alert does not focus on top of the onclick-fired alert. IE 7-9 plus Compatibility View all exhibit this particular behavior, with slight variations.
Opera (12.02): Opera does not fire the onmouseout-fired alert or console.log message until after the onclick-fired alert and log message, and you move the mouse (assuming you've moved it off of the input button element after clicking it). This seems weird, but more palatable than the Firefox and IE behaviors. Maybe I'm mistaken, though.
So what's happening? I'm not quite sure, but I think that the onmouseout is blocking the onclick's alert from focusing to the user. If you hit [Enter] while it's frozen, you get the onclick alert but no onmouseout. Chrome seems correct here; Firefox's "popunder" alert seems, well, sorta fishy.
In summary, at least the behavior of the two events in this case are not only specific to Firefox. What seems to be specific to Firefox (at least 17.0.1) is the fact the onmouseout-fired alert does not focus correctly, and the page "appears to freeze". This seems like a bug. I wonder if it's been reported?
$
It's not usually a good idea to use inline attribute event handlers like <input onclick="doclick()"...>, but let's ignore what's beside the point here. See MDN's DOM Event documentation, specifically the HTML attribute section, and realize this is a bit trickier and detailed than is worth going into here.
#
If you continue working with Javascript within the browser, you'll find out IE is... special. It has a special place in history, so weird or "abnormal" behavior is not unusual when checking your code with versions of IE. Personally, I suggest learning and working within Firefox or Chrome, and then checking in IE and other browsers that it works.

Javascript:
var clicked = false;
function popup()
{
alert("Hello World")
}
function pop2(ev)
{
alert("Good job");
clicked=true;
}
function pop3()
{
if(clicked == false)
{
alert("CLICK ME!");
}
clicked=false;
}
HTML:
<input type="button" onclick="popup()" value="Hello World">
<input type="button" onclick="return pop2(event)" onmouseout="pop3()" value="click me">
​link to demo

Since the click and mouseout/mouseleave events occur soon after the other on FireFox due to poor focusing during click event, we can add a sort of a delay for the code that will be processed during mouseout/mouseleave event. The following worked for me:
//Bind the element with classname to a function on click event
$(".rej").bind("click", showData);
//Bind the same element with classname to another function on mouseout event.
$(".rej").bind("mouseout", hideData);
Then you can proceed with your showData function. However in hideData function you will need to add a delay of few seconds before processing the code in that function, as show below:
function showData() {
//Do something
}
function hideData() {
var delay = 1000;
setTimeout(function(){
//Do something
}, delay);
}
And you're good to go. The mouseout event no longer overpowers the click event in Firefox. :) :)

jQuery late binding of Ajax elements doesn't work

I'm really stuck with a jQuery issue and I hope someone can help me out...
So I have a list of options on the left, and when you click on one, a form is generated via Ajax on the right. There's this element in the form:
<input type="text" class="value" value="something">
And what I want to do is to call
$(".value").tagsInput();
which is a jQuery plugin that works pretty much like Stack Overflow's 'Tags' input field when you ask a question.
So I tried this:
$(document).ready(function() {
$(".value").on("load", function () {
console.log("Tags Input");
$(".value").tagsInput();
});
});
and nothing is printed out. I've also tried this:
$(document).on("change", ".value", function () {
console.log("Tags Input");
$(".value").tagsInput();
});
and it doesn't work either. I'm wondering where I did wrong. Can anyone help me out?

As pointed out by Shabnam, the "change" event is not what you want, as it is fired only once the field is blurred.
Anyways, from the plugin documentation, it looks like you don't have to call that function every time a key is pressed, but it attaches its own event handlers autonomously.
So, probably you should be fine with just:
$(document).ready(function() {
$(".value").tagsInput();
});
Your .on handler will never work, as the load event is fired only by document when the page is ready.
If you want to debug things a bit, have a look at the supported callbacks, such as onChange.
SIDE NOTE
I don't like how that plugin is written, as it clogs the "global" jQuery.fn namespace with lots of functions, while jQuery documentation recommends not doing so (see: Namespacing).
UPDATE
See here: http://jsfiddle.net/aFPHL/ an example of this working (the .load() was monkeypatched to avoid having to call an actual URL, but its behavior is pretty much the same as the real one).

"change" event gets fired when the input element loses focus. If you want ajax call at the end of each key input, try using keyboard events

onChange event not firing on a textbox in Chrome

I have the following code to bind some validation logic to be fired when a user updates the value of a textbox. I expect that the //Do some stuff here code will execute when any of the textboxes it is bound to lose focus.
function RegisterHoursValidationHandlers() {
$('.topic-frame-body input[type=text]').live('change', function () {
//Do some stuff here
});
}
This works exactly as I expect in IE, Firefox and Safari. However, the event never fires in Chrome and I have no idea why.
UPDATE: I was able to get the desired effect by changing 'change' to 'blur'. Though this still doesn't explain why it doesn't worh with 'change'.

There's no known quirk about chrome. (the change event is supported across all browsers)
Example with live showing it working against dynamic content.
Test it here:
There is a piece of information or an assumption being made here that makes this unsolvable.
UPDATE: If it works when you change it to blur, it is possible that you are overwriting the previous event or function. By changing it to blur, whatever is overwriting it no longer will because it is a a different event.
This would also explain why you are not seeing any errors. (keep in mind, I believe that jQuery will chain events bound to the same elements, but live() is a bit of a special case - but that fact might point to it being the function, not the event binding)

Try using .delegate() instead http://api.jquery.com/delegate/
I've tried you code in both FF and Chrome - http://jsfiddle.net/B3aRy/ - It worked in both. So maybe its an issue elsewhere in your code?

What version of Jquery are you using?
I can't see the issue myself, but .live does not support the "change" event until jquery 1.4+

Try:
function RegisterHoursValidationHandlers() {
$(".topic-frame-body input[type='text']").live('change', function () {
//Do some stuff here
});
}
With the quotes around 'text' as I have it. Worth a shot.
Or try:
$(".topic-frame-body input:text").live();
The point being, I think the problem is in the details of how you're targeting the input field, rather than in the method.

clearTimeout does not work in ondblclick event in FireFox

I'm trying to have an element which support both click and double click on it. But the following example works in IE but does not work in FireFox 3.5.6:
<button onclick="c=setTimeout('alert(1);',1000);" ondblclick="clearTimeout(c);alert(2);">Test</button>
It just doesn't clear timeout, so alert(1) is being fired.
Does anyone know what is the issue?
How I can have click and double click events separately in FireFox?

When you double-click in Firefox, you get two click events and then a dblclick event. So you're setting two timers and clearing one. Clearing the timer on the click event should work:
<button onclick="clearTimeout(c);c=setTimeout('alert(1);',1000);" ondblclick="clearTimeout(c);alert(2);">Test</button>

You really shouldn't be inlining your javascript in your HTML. I would suggest using a JavaScript library like jQuery for this. jQuery will solve the cross browser event issues that you are having!
$(document).ready(function() {
var c;
$("button").click(function() {
c = setTimeout(function() {
alert(1);
}, 1000);
}).dblclick(function() {
clearTimeout(c);
alert(2);
});
});

I don't get it. It still doesn't work. I mean, if you put a clerTimeout in the onclick event the onclick event wont work since you stop it before you have finished it :S
Actually I don't see how you could say "This fixed the issue" ?? Just try and copy that very code you wrote and you'll realise that nothing happends... :/