What, if anything, is jQuery's change method doing here? - javascript

I'm familiar with attaching a handler to a checkbox's property change like this:
$(function(){
$("#chkbox").change(function(){
alert($(this).val())
});
});
However, doing this $("#chkbox").change(); will fire my alert, but the state of the checkbox won't actually change, which tells me that jQuery is just firing off handlers that it's already bound to an element. What is the use of calling it like [bourbon.io][1] does to close its modal?
$(".modal-fade-screen, .modal-close").on("click", function() {
$(".modal-state:checked").prop("checked", false).change();
});
If I omit the .change() at the end, the modal still closes and it seems everything works fine. What is the use of chaining change()? I ask, because I am trying to use Angular with this modal, and I need to invoke closing the checkbox's state so I can close the modal with some other buttons. angular.element(".modal-state:checked").prop("checked", false); seems to work fine, but since I'm not aware of anything like change in Angular
(it doesn't exist in jQlite), I want to be certain I'm not missing anything.

If you attach an change event listener to an element, every time a user triggers that event the event handler will fire. However, if you programmatically manipulate the element with change that would normally fire the event handler, the event handler would not fire. Therefore, you want trigger the change event manually once you made the change so that the event handler can be triggered.
$(".modal-state:checked").prop("checked", false).change();
//or $(".modal-state:checked").prop("checked", false).trigger('change');
What is the use of chaining change()? It all depends on what the change event handler does.

Related

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.

jQuery Simulate onClick

I am trying to simulate an onclick event on a drop down.
I have an IE object that is going to a page and I need to change a dropdown which has an onchange event:
$('select[name="blah"]').val(3).trigger('change');
$('select[name="blah"]').change(function(){
alert('changed');
});
When I try this, I would expect the alert to fire as it's technically an onchange.
http://jsfiddle.net/3y5hmyf0/
Is there a way to acomplish this?
More Details
My tool is controlling another IE page through an object. It navigates to the page and finds the select drop down on the page. From there, if you did it manually it has an onchange event when making a selection.
I am trying to get jQuery to simulate as if it was being clicked by a person to it triggers that on change event.
I have tried .trigger and .change and couldnt get either of them to work.
The only reason your code does not work is the order you are executing it. You need to connect the handler before triggering it:
JSFiddle: http://jsfiddle.net/3y5hmyf0/1/
// Wire up event handler
$('select[name="blah"]').change(function(){
alert('changed');
});
// Now generate the event
$('select[name="blah"]').val(3).trigger('change');
Note: Your manual change trigger is still required as a change event must normally be triggered by user interaction. Setting the value is not enough.
$('select[name="blah"]').change(function(){
NotifyChanged();
});
function NotifyChanged() {
alert('changed');
}
If you want to test the logic in the changed function, just call it.

Determining whether focus was received as result of a click event

I have an <input> element that can either have the focus set via code, or as the result of a mouse click.
If the user clicks on the input, then the click event handler will fire - all well and good. If the element receives the focus via some other way (e.g. via code) then I want to manually trigger the click event so that the handler will also fire.
I could do this:
$elem = $('input');
$elem
.on('focus', function() { $(this).trigger('click') })
.on('click', function() { alert('Clicked!') });
However, this will result in click handler being fired twice; once for the click event and once for the focus event.
Is there any way to selectively trigger the click handler only if the focus was not received as the result of a click event?
UPDATE
This is a very simplified version of my problem, so I can't do things like bind both handlers to the focus event etc. I'm trying to merge two third-party pieces of code.
The .trigger() function adds a property isTrigger in the event object to identify that the event was triggered by its usage. Although, it is not documented the property is still present in jQuery 1.8.3 but it seems to only be used internally.
Anyways, you can make use of the extraParameters parameter to add a custom property to the event object. For instance,
$(this).trigger('click', {
isTrigger: true
});
It will keep the compatibility with isTrigger even if it is gone in a future release.
After doing some more research it appears that there is no way of guaranteeing which event will fire first: click or focus. (There doesn't seem to be a standard that dictates the order of events.)
This means that when the focus event fires there's no way to determine if a click event will or will not be triggered by the browser shortly afterwards.
I managed to solve the issue by using setTimeout() to run a test about 100ms after the focus event fired to check if the click event had fired. The third-party code that I was using (bound to the click event) added an extra class to the <input>, so I was able to check for that.
You can tap into the mousedown event which fires before the focus event. When you click a focusable object the order of events is as follows... mousedown, focus, mouseup, click.
You could set a flag in the mousedown event and then check for it in the focus event to see if the focus came from a mouse click. Obviously make sure to clear the flag in the focus event handler. Every application is different, but tapping into the mousedown event allows you to figure out a solution.
Here is a JSFiddle demonstrating the order of events... http://jsfiddle.net/ek7v7/
$elem = $('input');
$elem
.on('focus', function() { alert("Focused!") })
Focus can be fired by focusing the input by using tab, clicking it, or by using .focus()
Is there a reason for on('click', ...)?

Jquery global events and dynamically added content

I'm trying to trigger my own custom events as global events, so that anything on my page can listen to them and react, however, for dynamically added content it's not working. See my fiddle at: http://jsfiddle.net/6TMkG/8/
As far as I understand, the event is triggered for any element in the page that jQuery knows has a handler for it, and it seems it doesn't trigger the event for the li's even though they do have a handler.
Anyone know how to get around this behaviour?
try this
$("#b2").click(function() {
//$.event.trigger("randomEvent");
$('li').trigger('randomEvent');
});
If you want global event, then you could bind the event handler on document, and trigger it on any element in the document.
$(document).on('randomEvent', callback);
$('ul').click(function() {
$(this).trigger("randomEvent");
});
Sorry I completely missed that.. I did not see the first part of your question.. Custom events.. Looks like you are associating the randomEvent but you are not triggering that event when that is associated with it..
Make sure you add the trigger Event in the Document.Ready function so that the evnet handler is associated with as and when the element is available.

How to programmatically click an element with MooTools?

In jQuery, I've done stuff like this in the past:
$('#someCheckbox').click();
And everything works as if the user just clicked on the element normally.
However the same doesn't work in MooTools:
$('someCheckbox').fireEvent('click');
The checkbox doesn't get checked, nor do any of the bound event handlers fire.
Is there a way to do this?
I need the already bound "click" event handlers to fire, so just setting it's "checked" attribute isn't an option.
The click event should fire when fireEvent('click') is called. See http://mootools.net/shell/8bbgn/ for a demo I just set up.
The checkbox doesn't get checked, as expected. To do this, you must set the checked property to true:
$('someCheckbox').setProperty('checked', true);

Categories

Resources