We Keep Coding

Event handler does not fire with .on(), but works with .delegate()

I'm using a Bootstrap Modal dialog, and I have an event handler set up so that once the modal closes, it triggers a couple of other updates on the page. I had been using the .delegate method which works perfectly. After reading that it was deprecated, I tried to move to the .on method, however the handler was not getting triggered. I cannot figure out why. Here are my two code snippets for comparison:
Delegate:
$(document).delegate('#streamingPopup', 'hide.bs.modal', function () { ... });
On:
$('#streamingPopup').on('hide.bs.modal', function () { ... });
No code withing the callback function has changed.
As far as I can tell, I'm using it the way the documentation says it should be used (http://api.jquery.com/on/). I'm assuming it has something to do with the hide.bs.modal event, or with the fact that it's attached directly to the jQuery object rather than the DOM itself, but I can't work out why it would work in one but not the other. Can anyone point me to what I'm doing wrong?

You might need to change the syntax for .on:
$(document).on('hide.bs.modal', '#streamingPopup', function () { ... });
This must work, as it targets a static parent. Replace the document with a static parent of #streamingPopup.

onchange not working when the page loads until I remove and then add it back to the code

I have a dropdown which has an onchange event inside the select tag. The onchange should call a function but I have also tested it just requesting an alert()
<select onchange="alert('test')">.......
For some reason when I load the page in the browser it does not work but if I remove the onchange from the element code via the browser and then write the onchange request back into the code from the exact place that I removed it, it works. I have even copied the onchange snippet and pasted it back in just to make sure I was using the same syntax and when I paste it back it starts working immediately
Any suggestions?

You can be more sure that the click handler is initialized after load by using an event listener, plus you maintain separation of behavior and presentation:
window.onload = function() {
addEvent(document.getElementById('mySelect'), 'change', myChangeFunction);
}
That said, there does seem to be something else wrong with your situation.

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

JavaScript firing on page load instead of event (Bug)

I'm having the strangest issue when I'm calling in functions on an event. I'm trying to get a function to run when the window is resized using $(window).resize() but it seems to fire the function as soon as the DOM loads then never again.
I'm probably missing something really simple here but I've been looking at it all day and I need a bit of outside help.
I've created a watered down version on JSfiddle that does the same thing but using $('a').click() instead of $(window).resize() so it's a bit easier to test. As the same issue is cropping up I have a feeling there's something wrong with my function but I just can't see it.
Link is here http://jsfiddle.net/sambeckhamdesign/APLZ2/1/

Try:
$('a').click(function(){
alert('hello');
}, imageResizer());​

You are running the function and sending it's output into the jQuery thingy as a parameter:
$('a').click(alert('hello'), imageResizer());
instead, try this:
$('a').click(function() {alert('hello'); imageResizer(); });
This provides an anonyomous function, which will be run when the item is clicked, calling imageResizer(), whereas the way you had it, it ran the imageResizer() function and put it's return value into the onclick handler. The reason it didn't work later on was because it would have been treating whatever the return value of the imageResizer() function was as code that it was trying to run.

You are triggering the event instead of assigning an handler to it
$('a').click(alert('hello'), imageResizer());​
Should be
$('a').click(function(event) {
event.preventDefault(); // I suppose you will want that ... it will avoid your window jumping to the top when you click due to the href="#"
alert('hello');
imageResizer();
});​

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.