I have some JavaScript/jQuery code that needs to call the checkbox's click handler after it completes.
I can use trigger() to call that handler; however, I see that this also causes the checkbox's checked state to toggle (as though it had been clicked).
Is there any way to call a click handler without actually performing a click on the checkbox?
Is there any way to call a click handler without actually performing a click on the checkbox?
Yes
The handler is just a function. Call the function:
function example() {
$(this)...do something...
}
$(...selector...).on('click', example);
...elsewhere...
$(...another selector...).each(example)
If you don't have a reference to the function, and you want to trigger all handlers on the element without triggering the native behaviors, you can use jQuery's .triggerHandler() method.
$(...selector...).on('click', function () {...})
...elsewhere...
$(...another selector...).triggerHandler('click')
Related
I have a button. I registered a function to treat the click event. However, I want to call it if another event happens. How do I call it from another asynchronous (or synchronous) event?
My first idea was to write the function with a name. That way, I can bind it to the click event to my button and also call it whenever I want to. However, in the case I wrote an anonymous function, what are my options?
Example (pseudo-code):
create button b;
assign some function f to b to execute on click;
b.invoke(args); //invoke runs f without the need to click
You can fire the "click" event on the element.
$('#MyButton').trigger('click');
EDIT: sorry, I misunderstood the question. But, you can still trigger the event and let the function to use some global variable so you can access everywhere.
Explaining by example:
$(".myCheckboxes").click(function () {
...
});
Inside the click event function I have code that does various things depending on what checkboxes are checked.
I however need to run this code to initialize it first, kindof like this:
$(".myCheckboxes").click(function () {
...
}).click();
It runs the code and it gets initialized, but it also clicks on all my checkboxes making them all invert their value.
Is it possible to execute the inline click event function wihtout executing a click event?
I would very much like to keep the function inline to keep the flow of the code. Also, it's not big enough to have the function outside of the event, but it's not so small as I would like to write the code twice.
triggerHandler triggers only the handler:
$(".myCheckboxes").click(function () {
...
}).each(function(i, checkbox) {
$(checkbox).triggerHandler('click');
}
Note that you need to iterate the checkboxes if you wish to trigger the handler for all of them instead of just the first one:
while .trigger() will operate on all elements matched by the jQuery
object, .triggerHandler() only affects the first matched element.
Use a named function as the handler, bind it and execute it:
$(".myCheckboxes").click(clickHandler);
clickHandler();
You may consider to call the function triggerHandler who seems to do what you need.
$(".myCheckboxes").click(function () {
...
}).triggerHandler('click');
NB: I haven't tested this solution.
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.
I have a button on which i am attaching a click event. I have to unbind it after i click on it, and later on in my code i need to bind that click event on it again. I tried binding it again but that does not works. I can't use jquery 'live'. Is there any way to create a custom bind function on click event and then again call it ?
$(".submitButton").click(function(e){
//some functionality on click
$(".submitButton").unbind('click');
});
//somewhere ahead in my code
$(".submitButton").bind('click');
Apparently this isn't working. Is there any way to tackle this ?
Your .bind call doesn't seem correct. You haven't specified a callback.
So start by writing a function:
function handleButtonClick() {
//some functionality on click
$(this).unbind('click');
}
Notice that inside the handler I am unbinding $(this) which is the element being clicked and not all elements with class="submitButton".
and then:
$('.submitButton').bind('click', handleButtonClick);
and then later when you want to rebind:
$('.submitButton').bind('click', handleButtonClick);
and so on.
define your listener somewhere else:
function clickHandler() {
//some functionality on click
$(".submitButton").unbind('click', clickHandler);
}
$(".submitButton").bind('click', clickHandler);
//somewhere ahead in my code
$(".submitButton").bind('click', clickHandler);
When you use .bind() to bind an event handler it expects a function to be passed as well, since that's what will be executed when the event fires. Don't use an anonymous function, instead declare a named function and pass a reference to that when binding.
function handleClick(e){
//some functionality on click
$(".submitButton").unbind('click');
}
$(".submitButton").click(handleClick);
// somewhere else in your code (in reaction to some other event)
$(".submitButton").click(handleClick);
You can use jQuery.one(). Please refer below code.
$(".submitButton").one('click', clickHandler);
The first form of this method is identical to .bind(), except that the handler is unbound after its first invocation.
you can call it or bind it whenever it necessary.
I'm building some dynamic select lists with jQuery. When they are changed, I want the event to trigger a function to get a data refresh.
var selector = $('<select id="myid" />');
selector.append($('<option value>Option Placeholder</value>'));
// attach onChange event to select list
selector.bind('change', doUpdate(this));
My problem is that the change event gets fired every time the select list is built. I'm not sure how the trigger is happening-- I'd expect it to only trigger the change event when it, well, changes!
http://jsfiddle.net/TPuwc/
When you do this:
selector.bind('change', doUpdate(this));
what you're expecting to happen is to bind the event handler to execute the doUpdate function, passing this as an argument.
That isn't what's happening. Instead, what it's doing is calling doUpdate(this) immediately, and then attempting to set the value returned by that function call as the event handler for the change event.
You can simply do:
selector.bind('change', doUpdate);
jQuery will handle the value of this for you (it will be the element triggering the event), so you don't need to pass it in to the function as an argument.
You'll have to understand the difference between function calls and function references. Every callback should be provided as a function reference (or an anonymous function) and not a function call.
The difference is the parentheses () after the function name.
selector.bind('change', doUpdate);
EDIT: Be sure to update the doUpdate function. It will automatically have access to the element that triggered the change using the this keyword, so you don't need to pass it as a parameter.
Your event arrachment method is wrong. for event attachment you should pass function. while here you are executing function and passing return value.
var selector = $('<select id="myid" />');
selector.append($('<option value>Option Placeholder</value>'));
// attach onChange event to select list
selector.bind('change', function(){ doUpdate(this) });