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.
Related
I have this code :
$document.on('show.bs.dropdown', function (e) {
$document.on('focusin', function (e) {
console.log('bleh');
}
}
What I am trying to achieve here is online when you receive the event : show.bs.dropdown then you activate the focuin event. I am doing this because I don't want a focusin event to be fired when it's not in the show.bs.dropdown context....This code works, but it multiply the event everytime I fire show.bs.dropdown...I need to leave focuin "on" as soon as the show.bs.dropdown so it can never be off.
Thanks!
I have a search field that currently has an .on('input') event handler attached to it. However, in some instances the search field may be pre-populated if a value is passed through the URL (http://127.0.0.1/search/query-is-here). The issue here however is that the event handler will not be fired until the user edits the search field's value, meaning no search is automatically made.
I have tried initiating a .trigger by specifying focus, click, change, ... but none seem to work (and yes, I do change the event handler to .on('input focus') for example). What's the crack?
--
JS File (referenced in the footer BEFORE the trigger)
$('#search').on('input focus', function(e) {
e.preventDefault();
// various if statements and variable assignments
}
Trigger
// codeigniter -> http://ip.com/{segment 1}/{segment 2} -> this does get executed
<?php if($this->uri->segment(1) == "search" && $this->uri->segment(2)):?>
<script>
$('#search').focus();
$('#search').trigger("focus");
</script>
<?php endif; ?>
My understanding of $('#search').trigger("focus"); is that it should fire the event handler attached to #search, and execute the JS within that function.
You're subscribing to the event 'input focus' and triggering the event 'focus'. I think you'll want to subscribe to both events.
$('#search').on('focus', myHandler);
$('#search').on('focus input', myHandler);
Why are placing e.preventDefault() on focus? The event.preventDefault() method stops the default action of an element from happening.
Remove that e.preventDefault() from the code and try it again.
$('#search').on('input focus', function(e) {
//remvoe this line>> e.preventDefault();
// various if statements and variable assignments
}
Below is the jsfiddle link:
https://jsfiddle.net/shrawanlakhe/c8v5v788/1/
I have also place e.preventDefault() on the handler and it is preventing click event handler from firing .So first try it and the click event handler will not fire and then remove the e.preventDefault() and then try it again in the fiddle and this time event handler will fire
I am trying to figure out why the following doesn't work.
I am setting a keydown event handler, and then triggering the event. But the handler doesn't detect it.
If anyone can enlighten me!
function onKeyDown(event)
{
alert('keydown');
}
document.addEventListener('keydown', onKeyDown, false);
var keydown = jQuery.Event('keydown', {which:38, keyCode:38});
$(document).keydown();
$(document).trigger(keydown);
jsfiddle: http://jsfiddle.net/4bf3z/
From http://api.jquery.com/trigger/, emphasis added:
Any event handlers attached with .on() or one of its shortcut methods
are triggered when the corresponding event occurs. They can be fired
manually, however, with the .trigger() method. A call to .trigger()
executes the handlers in the same order they would be if the event
were triggered naturally by the user.
So, it works as expected if you attach the handler with jQuery instead of pure javascript:
function onKeyDown(event)
{
alert('keydown');
}
$(document).on('keydown', onKeyDown); // <----
var keydown = jQuery.Event('keydown', {which:38, keyCode:38});
$(document).keydown();
$(document).trigger(keydown);
jQuery’s trigger only triggers jQuery-attached events. Triggering actual DOM events is trickier, and the keyboard events module is still a working draft:
var e = document.createEvent('KeyboardEvents');
e.initKeyboardEvent('keydown');
document.dispatchEvent(e);
The arguments to initKeyboardEvent are on MSDN. Firefox uses initKeyEvent.
Updated jsFiddle
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(){}
});
How can I fire the onchange event of an HTML Select element by code.
The following only selects a list item but doesn't seem to fire the onchange event?
options[index].selected = true;
If the event is hoked up directly via onchange, you can invoke the handler by calling that handler, like this:
mySelect.options[index].selected = true;
mySelect.onchange();
...if it's not rigged up that way, then different approaches are appropriate depending on how you're binding, and more information about how your onchange handler(s) are attached would help.