jQuery on change event not triggered by jQuery itself? - javascript

I placed a listener on all checkboxes on my page with .on('change'). When clicking on a checkbox it actually detects the change and fires a function. BUT, when I use a jQuery function to set a checkbox to checked like so: $('#checkboxOne').prop('checked', true) the .on('change') doesn't detect a change? How come?

Kartikeya Khosla is right
The 'change' event is only fired when a user triggers it. Setting properties from within your own code will not trigger events.

If you want to fire jquery function it self, then you should write your function in $(document).ready(function(){ });

Related

Jquery stop change event on manual trigger

I have bound a change event on "select box" which call when user changes select box value manually. But I want to stop change event call when we trigger change event by javascript like $(element).trigger('change').
Please help
use the off function to remove an event listener.
$(element).off('change')
Trigger method have another parameter (extraParameter ) and put your data. In handler check extraParameter to findout it is manually or with javascript code.
$(element).trigger('change',{'isTriggeredBySystem':true})
jQuery trigger

Simulate clicking a button

If I have an existing click event associated with a button, can I use code to simulate that button being pressed so the code in the click event will run? I'm asking because I want there to be certain times where the user does not have to press the button for code to be executed. I would like to press the button automatically for them in certain instances if that makes any sense.
As simple as this,
$(function() {
$('#button').trigger('click');
});
var button = document.getElementById('yourButtonIdHere');
button.click();
This will fire a click event in the button
You can trigger a click event on an element by calling the .click() function on the element. By passing no value to the function the click event will fire, as opposed to setting up a listener for the click event.
If the button has an id of "form-btn", here's what that would like:
<button id="form-btn">Submit</button>
<script type="text/javascript">
//Setup the click event
$('#form-btn').on('click', function (e) {
alert('clicked!');
});
//Call the click event
$('#form-btn').click();
</script>
This should work fine, although I usually try to use a named function when setting up my event handlers, instead of anonymous functions. By doing so, rather than triggering the event I can call the function directly.
Note that in my experience, older browsers (IE6, IE7) sometimes limit what code-triggered events can do as a safety precaution for the user.
Here's documentation on the .click() function: http://www.w3schools.com/jquery/event_click.asp
Edit 1
I forgot that jQuery also has the .trigger() function, as used in choz's answer. That will also the job quite nicely as an alternative to .click(). What's nice about .trigger() is that it can trigger standard events as well as custom events, and also allow you to pass more data in your event.
Just make a function and run the function from within the button.
Three Choices:
You can call the click event handling function directly when appropriate:
if(timeIsRightForClick){
yourClickHandler();
}
You can simulate a button click by calling the .click() method of the button.
$("#ButtonID").click()
https://api.jquery.com/click/
Same as #2, but using jQuery's trigger() function, which can be used on standard events and custom ones:
$("#ButtonID").trigger("click");
http://api.jquery.com/trigger/
Choices #2 and #3 are usually better because they will cause the event handling function to receive a reference to the click event in case it needs to use that object. Choice #1 doesn't cause an actual click event (just runs the code you tell it to) and so no event object is created or passed to the event handler.

jQuery keyUp on Page Load

I have a input element that has a keyup event, any number greater than will show a div.
This works if a human types into the textfield. However, how do I achieve the keyup on page load if I am setting the value via JS?
<input id="this_field">
JS on page load:
$('#this_field').val('4'); //Now I want the keyup to be event to be triggered.
I know I can wrap the keyup in a function and call it right after setting the value, however is there a way to trigger the keyup?
$('#this_field').val('4').trigger('keyup');
or just :
$('#this_field').val('4').keyup();
jQuery keyup() function API
Make use of $(document).Ready() and trigger() of jquery .
$(document).ready(function($) {
$('#this_field').val('4').trigger('keyup');
});

simulate onChange event to fire on HTML input box

I have jQuery that uses the change event from a selection box to update a input box on the form. I need the input box to fire it's change event when I update it's value.
This link on MSDN shows a way to simulate the click event. Is there a technique I can use to simulate a change event?
You can use trigger():
$('#input-id').trigger('change');
You can trigger change event handler. You can simply call it like that:
jQuery('#my_field').change();
which is a shortcut to:
jQuery('#my_field').trigger('change');
See more on the documentation of .change() (its third, attribute-less variation).
This should theoretically do it:
<input id="textinput" value="somevalue" name="somename" />
<script type="text/javascript">
function doSomethingOnInputChange(e) {
console.log('input on change');
}
$('#textinput').bind('change', doSomethingOnInputChange);
$('#textinput').trigger('change');
</script>
It binds an event handler to a custom 'change' event and then fires the event.
There are several good jQuery based answers already (though you didn't use a jQuery tag) but there's another approach that can work for you if you're binding the change event to call a function.
Say you've already bound the change event to the doSomethingOnInputChange function as in Vlad's answer...
Rather than simulating an event by triggering 'change' you can directly call doSomethingOnInputChange - that is, instead of doing:
$('#textinput').trigger('change')
your javascript just makes a call to the same function that gets called anyway when you trigger the event:
doSomethingOnInputChange( ... );
You may or may not want to pass the #textinput DOM element as a parameter in a direct call, or an event parameter (but providing your own event parameter makes this approach hardly worthwhile) -- those depend on what you need to do in the function.

jQuery: Is there a tag like change() that also runs on page load?

I have a set of radio buttons that triggers a jquery function if a specific value is chosen (via .change())
However, in some cases that value will be chosen by default when the page loads. At the moment I have two separate functions - one inside the .change() event, and a conditional that runs on pageload. I'd like to clean this up, so: is there an event which runs both when a value is changed, and at pageload?
Cheers...
You can trigger your change event on pageload like this -
$(document).ready(function()
{
$("#myradioButton").trigger('change');
});
No, but you can use the same handler.
$(document).ready(function() {
radioChangeHandler(); // Call it when the DOM is ready
$('...').change(radioChangeHandler); // Attach it to the radio buttons
});
You can send the deselect the default value on the server (or on client-side), and after binding the change handler, you can call:
$('#radio').change();
In other words, the whole process is:
$(function(){
// deselect the default value
$('#radio').removeAttr('checked');
// binding radios
$('#radios').change(function(){});
// Changing the value of the default radio
$('#radio').attr('checked', 'checked');
});
The normal approach would be to make the call in a separate function, and call this from both places. There is nothing that you can call as you seem to want to.
Yes it does feel slightly untidy to have the same calls in two places, but they have different approaches. The change method is reacting to a control event, whereas the pageload is responding to a page being loaded ( duh ).
You can use something like $(".radio").triggerHandler("change") on page load to trigger event handler without changing state.

Categories