We Keep Coding

jQuery input event - trigger('change') does not it

I have the following event listener on my inputs on a HTML page:
$('input').on('input', function (e) {
console.log(this.value);
});
I understand the input event captures the following individual events change, keyup and paste.
When I update an input value using jQuery, I want to trigger this event so my event code runs. If I run:
//Does not work
$('input').val('test').trigger('change');
My event does not fire. I expected the input event handler to catch the change event. If I run:
//Does work
$('input').val('test').trigger('input');
This does work... why does triggering the change event not fire my input event handler?

I expected the input event handler to catch the change event.
That's where you went wrong - the input event handler does not catch change events.

stopPropagation() of a different event

How can I listen to a change event on a checkbox without triggering a click event on its container?
<label><input type="checkbox"> Hello world</label>
I want to trigger an action on the checkbox's change event, but I don't want it to bubble up to a click event on the label.
(function ($) {
$('input').change(function (v) {
v.stopPropagation();
});
$('label').click(function () {
alert('You should not see this message if you click the checkbox itself!');
});
})(jQuery);
http://jsfiddle.net/r49PA/
Any ideas? Thanks!

The issue is that two events are triggered when you click the checkbox -- a change and a click. You're only catching the change, so the click isn't ever being told to stop propagation. You need to either add a second handler on the checkbox for click events, or combine one handler to catch both types, like this:
$('input').on('change, click', function (v) {
v.stopPropagation();
});
Here's a jsFiddle demonstrating a combined handler: http://jsfiddle.net/r49PA/4/

You can stop propagation on click event instead of change event since you bind click event for the parent label:
$('input').click(function (v) {
v.stopPropagation();
});
Updated Fiddle

With plain javascript you can do something like this:
var stopPropagation = false;
selector.addEventListener('mousedown', function(event) {
// simulating hold event
setTimeout(function() {
stopPropagation = true;
// do whatever you want on the `hold` event
})
}
selector.addEventListener('click', function(event) {
if (stopPropagation) { event.stopPropagation(); return false; }
// regular event code continues here...
}
Since mousedown and click events are overlapping, we want the click event to not be triggered when we are trying to get the hold state. This little helper flag variable stopPropagation does the trick.

How can I have a dynamically allocated DOM event fire as well as a backbone event?

I want to have a loader attached on my buttons on mousedown on every page.
I have a function that fires after the layout renders and passes in the top level view, then grabs every button and attaches a mousedown event on it :
attachGlobalButtonEventHandler : function(view){
view.$el.find('button.viewtag, button.newtag').on('mousedown', function(){
var $target = $(this);
$target.addClass('activated');
$target.prop('disabled', true);
});
}
This works fine, but the problem is my backbone events on the buttons are not getting fired, which looks like:
events : {
'click .newtag' : 'gotoCreate'
},
gotoCreate : function(evt) {
evt.preventDefault();
app.router.navigate('somewhere', true);
}
If I remove the attachGlobalButtonEventHandler, then the click on newtag fires fine, but does not fire at all if the handler is attached. How can I make sure the backbone click event will fire as well?

The problem here is the disabled property and the order events are executed.
The mousedown event happens before the click event and in the mousedown callback you disable the button, thus removing the click event entirely.
Check this jsFiddle out. If you comment out the line $(this).prop('disabled', true); then the click event will fire.
By adding a setTimeout you can effectively execute it on the next tick, see this jsFiddle for details.
Edit: I just noticed #codemonkey had added a comment suggesting the same thing.

Why is event e undefined in callback when firing event manually?

I am using Mootools and adding a click event to a link. I have added a function to an event with this:
$('addCallRoute').addEvent('click', addCallRoute); // Add button
The function contains this:
function addCallRoute(e) {
console.log(e);
}
The function that fires the event (without an actual click)
$('addCallRoute').fireEvent('click');
The Problem:
When I click on the link physically, e is defined. but when I programmatically fire the event, e is undefined. Why?

Because you're not actually/physically triggering an action but firing it remotely. This is how it works.
event normally contains all sort of information about the element from which the action was triggered.
Always check if event is defined before trying to use any methods on it. Or do this:
link.fireEvent('click', {
stop: function(){}
});

jQuery - How do I make custom event fire only once?

I need to control the order in which events are fired. To ensure that my custom event is fired only after another event has finished I am triggering the custom event in the handler of the first event.
$(".HwRadioButton").click(function(event) {
//Stuff that needs to happen before custom event
...
//trigger custom event
$(".HwRadioButton").trigger("onAnswerChange");
});
Custom event binding:
$(document).ready(function() {
$(".HwRadioButton").bind("onAnswerChange",function(event) {
//custom event stuff
});
});
The problem is that I have 12 elements that have a class attribute value of ".HwRadioButton". The event, "onAnswerChange" is triggered 12 times. Why is that? Should I even need to select any elements? I just want to define a custom event and explicitly trigger it.
Thanks!

In your code try:
$(".HwRadioButton").click(function(event) {
//Stuff that needs to happen before custom event
...
//trigger custom event
$(this).trigger("onAnswerChange");
});
that will trigger the onAnswerChange on the one element that was clicked.

You should use one like
$('.HwRadioButton').one('click', function() {
alert('This will be displayed only once.');
});

$(".HwRadioButton").trigger("onAnswerChange") triggers onAnswerChange for all items selected by that selector. Trigger the event only for $(this).trigger("onAnswerChange").