Develop Reference

Change event not firing for programmatic changes

I have an HTML select dropdown whose value may be edited programmatically. My change event fires when the user edits the value from the page, but not when the value is changed in the code. I need the event to fire in both cases. Any ideas on how to accomplish this?
$("#dropdownId").on('change', function () {
//do stuff
});
...
var df = document.frmMain;
df.dropdownId.value = someValue; //change event does not fire

You can use jQuery's .trigger to fire an event. In your case:
$("#dropdownId").trigger("change");

You need to manually fire the event using jquery trigger function after settig the value :
$("#dropdownId").trigger('change');

use jquery to set selection and for fire change event.
$('#'+df.dropdownId).val(someValue).change();

What is the need of .trigger("Change ") in this code

$("#pass").val("").trigger("change");
$("#pass_con").val("").trigger("change");
What s the use of using trigger statement here

On change event occurs when user enters values manually, i.e. events initiated by user and not the JS code. Setting the value using .val() do not trigger change event.
Thus,.trigger("change"); or .change(); needs to be used for triggering change event attached to it.

May be there are change listeners registered on #pass, #pass_con elements.
Changing the value of these nodes programatically will not trigger a change event.
Manually triggering the change event for the listeners to be notified.

how to remove event listener, set in jQuery, using pure JS?

I have a situation where a click eventlistener is being set on on a dynamic element using jQuery's .on:
$('body').on('click', '#email-me', function() {
call my code....
});
and later on in the page, I have to remove this listener - but - and here's the catch - I DON'T have access to jQuery anymore (long story), which means pure js...
so, I can't use unBind(), and even if i name my anonymous function up there, it still won't remove the event listener.
How do I remove the bind, so this element isn't clickable anymore?
Thanks for reading!

You can't. jQuery events are handled differently than normal javascript events.
When you add an event to an element with jQuery, these steps are followed:
If the element hasn't been initialized with an internal (internal to jquery) datacache, it gets initialized with a datacache, then the datacache is returned.
If this is the first event handler added for that event type, a special event is added to the element for that event type that executes jQuery.event.dispatch.
Finally, the handler(s) that you passed in are added to the datacache.
Therefore, the only way for you to remove this event is to get ahold of the special event handler that jQuery bound that triggers jQuery.event.dispatch, but since you don't have access to jQuery, there's no way you will get that event handler. (even with access to jQuery, I don't think you can get that handler.)
You need to instead find a way to retain access to jQuery, or don't use it at all.

How to trigger a js function with Jquery

I want to trigger this jquery function by using trigger method of JQuery. How can I do that ? Actually I dont even know the trigger method is suitable for user defined functions.
$('a.pop').click(function() {alert('testing'); }
this is not working
$('a').trigger(testtt);
var testtt = function(){ alert('aaa');}

Very similar to the way you install the event handler:
$('a.pop').click();
If you have the name of the event you want to trigger as a string, you can also do it this way:
$('a.pop').trigger('click');
This is also the solution to use if you want to pass crafted data to the event handler -- trigger also accepts a second parameter.

You can trigger a click event on the element by simply running
$('a.pop').click()

$('a.pop').click(), or if you're triggering some dynamic method, or custom event:
$('a.pop').trigger(eventName), e.g: $('a.pop').trigger('click');

Reading from jQuery API, the following should work.
$('a.pop').trigger('click');

.trigger() is used to trigger event handlers (custom or built-in'). Since you bound your function to the "click" handler, you can use trigger like so to call it:
$('a.pop').trigger('click');
jQuery's event binding methods can also be called without parameters to trigger them, which means you can also do this:
$('a.pop').click();

jQuery .change() event is triggered with .click() in newer versions?

I'm currently upgrading my application to use jQuery 1.6.1 (previously using 1.4.4) and found that now the .click() event automatically triggers a .change() event as well.
I created a simple example here: http://jsfiddle.net/wDKPN/
Notice if you include 1.4.4 the .change() function will not fire when the .click() event is triggered. But when switching to 1.6, the .change() event is fired when .click() is triggered.
Two questions:
Is this a bug? It seems that programmatically triggering .click() shouldn't also fire other events (for example, it would seem wrong to also automatically fire .blur() and .focus(), to help "mimic" a user's click).
What is the proper way for me to bind a change() event and then trigger both a click() and change() event for that element? Do I simply call .click(), and rely on the fact that .change() will also fire?
$('#myelement').change(function() {
// do some stuff
});
$('#myelement').click(); // both click and change will fire, yay!
In my old code I'm using this pattern to initialize some checkboxes (and their checked states and values) after an ajax call:
$('#myelement').change(function() {
// do some stuff including ajax work
}).click().change();
But in 1.6.1 my logic fires twice (once for .click() and once for .change()). Can I rely on just removing the .change() trigger and hope that jQuery continues to behave this way in future versions?

Best way to do this is:
$('#myelement').bind('initCheckboxes change', function() {
// do some stuff including ajax work
}).trigger('initCheckboxes');
To do your initialization stuff you just bind to it a custom event, which you trigger it the first time the page loads. This, no one will take away from you on any versions.
Whereas change event, I believe, will continue to be there on all versions, because it has been for so long, and it just works nicely that way.
In the end, this is a happy ending story, because the custom event initCheckboxes will fire just once on page load and change event will always listen and fire on change state.

I would say this was a bug in jQuery 1.4.4. Removing the jQuery event handlers and using standard addEventListener produces the same result as jquery 1.6.1.
http://jsfiddle.net/jruddell/wDKPN/26/
window.count = 0;
document.getElementById('mycheckbox').addEventListener('change', function() {
window.count++;
jQuery('#output').append('I fired: ' + window.count + ' times<br />');
});
document.getElementById('mycheckbox').click();
Also I would use triggerHandler to specifically invoke a jQuery event handler. If you want the event model to determine which handlers to call, then use click, change etc.

Forget about the click event for checkboxes. The change event handles everything.
$('#myelement').change(function() {
// do some stuff
});
$('#myelement').trigger('change');
See for yourself: http://jsfiddle.net/zupa/UcwdT/
(This demo is set to jQuery 1.8 but works in 1.6 as well.)

I think you can make it work for both jQuery 1.4.4 and 1.6 implementations by putting change() within click handler and then triggering the click.
$('.myelement').click(function(){
$('.myelement').change();
alert($(this).val());
});
$('.myelement').trigger('click');
Have a look there for simple example.