Develop Reference

Trigger event from inside event hander has different behavior in IE10

I want to trigger a blur within a keypress. IE10 works differently from Chrome/FF. It appears that IE will finish the keydown handler before calling the blur handler, whereas Chrome and FF will trigger the blur handler right when the blur occurs and then go back to finish the keypress handler.
I'm wondering if this is a bug and if there is a good workaround in IE to work like Chrome and FF.
See the code below.
$(document).ready(function () {
document.getElementById("txtInput").addEventListener('blur',
function (event) {
console.log('blur');
});
document.getElementById("txtInput").addEventListener('keydown',
function (event) {
console.log('down 1');
document.getElementById("txtInput").blur();
console.log('down 2');
}
);
});
http://jsfiddle.net/244raf1u/
Output from Chrome:
down 1
blur
down 2
Output from IE
down 1
down 2
blur

Try this:
$(document).ready(function () {
$("#txtInput").blur(function (event) {
event.preventDefault();
console.log('blur');
});
$("#txtInput").keypress(function (event) {
console.log('down 1');
$(this).blur();
console.log('down 2');
});
});
Check out the changes I made in this updated fiddler here.
I had to change the way you were calling the blur() trigger, and then added a simple event.preventDefault() in the blur() handler to prevent a second firing in IE. It seems like IE was trying to move focus off of that input after running the keypress handler.
Also by using this notation: ($("#txtInput")[0]) you are actually referring to the original element object and not the jQuery object, which may be causing issues in IE where the other two are catching the error.
Hopefully this will help!

I found a couple solutions. First is to use the focusout instead of blur. Blur doesn't bubble, focusout does. Not sure why that matters, but the events are probably implemented differently. Unfortunately, that's not an option for me.
The other solution was to have two keydown handlers. The first triggers the blur and anything I want to happen before the blur. The 2nd handler does the processing after the blur, but I have to set a 50ms timeout because all keydown handling occurs before the blur handling.

mouseup event on document.documentElement does not fire with alert

I need to detect mouseup event after mousedown on the document.
I have tried to add an event listener to document and document.documentElement with no success.
I need possibly a cross platform solution without jquery.
Notes: problem appears on not all browsers using alert().
http://jsfiddle.net/0f7vrzh7/8/
document.documentElement.addEventListener('mousedown', function(){
alert('mousedown');
});
document.documentElement.addEventListener('mouseup', function(e){
alert('mouseup')
});

In certain browsers the first alert would stop the second event. It works even with alert in IE11 for example. In the browsers where you experience this issue the alert box blocks the UI before the mouseup event is processed or propagated to the element you have the event handler attached to. Change to console.log() statements in your event handlers and the events are fired as you expect them to. Updated fiddle.

it's yours alert block the mouseup event. try with
document.documentElement.addEventListener('mousedown', function(){
document.getElementById("test").style.backgroundColor = "#ff0";
});
document.documentElement.addEventListener('mouseup', function(e){
alert('mouseup')
});
http://jsfiddle.net/0f7vrzh7/16/

IE onpropertychange event doesn't fire

select
<input type="file" id="real-file-input" style="display:none" />
$('#select-handler').click(function(){
$('#real-file-input').click();
});
$('#real-file-input').bind('propertychange', function(){
alert('changed');
});
it's weird that when I use .click() the propertychange won't be fired.

Actually your code works fine in IE7 and 8 for me, whenever I change a value of input type ='file', the alert is fired. Whereas it is not working in >IE9 versions.
From paulbakaus's blog on propertychange on Internet Explorer 9
What’s wrong with propertychange on IE9?
IE9 doesn’t fire non-standard events when binding them through
addEventListener. Every modern JS library that uses feature
detection, including jQuery, will fail (see also:
http://bugs.jquery.com/ticket/8485). “Not a biggie” you say, “simply
use attachEvent directly” you say?
The good news: propertychange fires when using attachEvent. The bad
news: It refuses to fire when modifying any CSS properties on the
element that are unknown to the engine.. “Well this sucks,” you say,
“but I read you can use DOMAttrModified on IE9!” you say?
DOMAttrModified features exactly the same behavior. It does not fire
for unknown CSS properties. This is a complete disaster.
Many developers faces the same weird behavior.
Why do you want to use onpropertychange which is supported only by Internet Explorer?
I would rather move on to change event handler
$('#real-file-input').bind('change', function(){
alert('changed');
});
or if it is a HTML5 then input event handler.
$('#real-file-input').bind('input', function(){
alert('changed');
});

Unfortunately, IE9 doesn't support the "input propertychange" event on deleting. Escape, Delete and Backspace can be easily captured using the "keyup" event with event.which, but the selection of a text and deleting through right click -> delete does not fire the events propertychange, change, select or keyup/keydown.
I found no solution so far for this problem.
here's my code:
$('#search_input').on("propertychange input", function(event){
console.log('propertychange event');
// trigger search
});
$('#search_input').on("keyup", function(event){
console.log('keyup event', event.which);
if(event.which === 27) { // on ESC empty value and clear search
$(this).val('');
// trigger search
} else if(event.which === 8 || event.which === 46) { // trigger search on Backspace
// trigger search
}
});
$('#search_input').on("change input", function(event){
console.log('change event');
// trigger search
});
$('#search_input').on("select input", function(event){
console.log('select event');
// trigger search
});

keyup not working on dynamically loaded textareas

Other event types seem to work fine here - for example, mouseenter:
$("body").delegate(".textareas", "mouseenter", myalert);
But using keyup, or keypress - it wont work. I didn't change anything else in my code except the event type on this line. Example:
$("body").delegate(".textareas", "keyup", myalert);
I type in a textarea, but now myalert doesn't get called.
I'm using jquery 1.7.1.

You can use an on to bind
http://jsfiddle.net/Jy2rA/
$('button').click(function () {
$('body').append('<textarea>');
});
$('body').on('keyup', 'textarea', function() {
$('p').fadeIn(function(){$(this).fadeOut()});
});​

DOMSubtreeModified does more than I need for this, but at least it seems to notice any entered text too, so if anyone else runs into this same problem, that's what's sort of working for me until a better solution is found.

jquery click event tr or input clicked

I have the following code:
$(document).ready(function () {
$("tr").live('click',function(){
alert("TR");
});
$("input").live('click',function(){
alert("INPUT");
});
});
Fiddle here
How can I just trigger the click function for the checkbox without triggering the tr function? Is there any solution with jQuery?
I will not set return false at the end of the input function and I really need the tr element too.
Info: event.stopPropagation doesn't work on live() events.

You can use the stopPropagation() method on the event object.
It will prevent the event from bubbling up without cancelling the default event behavior.
$(document).ready(function () {
$("tr").click(function(){
alert("TR");
});
$("input").click(function(e){
alert("INPUT");
e.stopPropagation();
});
});
As it seems you are using .live() and not direct event binding, you can't use stopPropagation().
First of all, .live() is legagcy code and has been deprecated, which means it could be removed from the library in any future new version. I don't know which version of jQuery you are using but you should consider moving to the latest (which is more optimized anyway) and use .on() for event delegation.
Nevertheless, if you can't upgrade your jquery library, here's maybe a solution to your problem. The event parameter passed to all event handler contains a property target which reference the element from which the event was initiated. So you could do something like:
$("tr").live('click',function(e){
if (e.target.nodeName !== "INPUT") {
// if ($(e.target).is('input') === false) { // jquery style but maybe less efficient
alert("TR");
}
});
Not very elegant but does the trick. Here's an example.
The problem with .live() is that events are binded to the document so as more complex as your application would become, you may end up with headaches to stop propagation.
In the meantime I've made a fiddle using .on() (here) and one using .delegate() (here).

You need to add stopPropagation() to your input click handler. It will stop the event bubbling up the DOM to parent elements.
$(document).ready(function () {
$("tr").click(function(){
alert("TR");
});
$("input").click(function(e){
alert("INPUT");
e.stopPropagation();
});
});
Example fiddle
OP Updated Question:
$(document).ready(function () {
$("TABLE").delegate("tr", 'click',function() {
alert("TR");
});
$("TABLE").delegate("input", 'click',function(e) {
e.stopPropagation();
alert("INPUT");
});
});

Use stopPropagation() for input handler
http://jsfiddle.net/KJg6Q/

http://jsfiddle.net/LwvYD/2/
e.stopPropagation() in handle on input or use e.relatedTarget
$("tr").click(function(e){
if( e.relatedTarget.tagName != "input" )
alert("TR");
});