How to click a link with jQuery - javascript

If you want to click a link with jQuery, you can use one of the following methods:
$('a').click();
$('a').trigger('click');
Which is better? (performance, browser support, i.e.)

There seems to be none, performance wise.
See: http://forum.jquery.com/topic/a-trigger-click-vs-a-click
This method is a shortcut for .bind('click', handler) in the first
variation, and.trigger('click') in the second.
Except you can extend the trigger command.
Seems like i was mistaking.
Since click is actually calling trigger, if no function is called.
See: jQuery advantages/differences in .trigger() vs .click()
And for performace results, #VisioN linked to this: http://jsperf.com/click-vs-trigger-click
So, basicly using trigger is the fastest way, also i think it actually tells what you are doing, instead of just doing it.

http://forum.jquery.com/topic/a-trigger-click-vs-a-click
In this form they are the same. As the api reference states:
This method is a shortcut for .bind('click', handler) in the first variation, and .trigger('click') in the second.
The second can also be used to attach a function to the event.

Exactly the same. But I prefer $('a').bind('click', function(){});

Related

How can I make .one() event refresh without page reloading?

I've used el.one('click', fn) in my codes. Now I need to refresh .one() event. I mean I want to call fn several times per clicking on el in the same loaded page.
I know, there is .on() event which sounds good in my case. But not really, I need .one() in general. Just few times I need to force .one() to acts like .on().
Ok well, is there any solution?
You could turn on .on() for as long as you need it to perform that way, and then do .off() to turn it back off.
Example:
var aFunc = function() { console.log('click!'); };
$("#foo").one("click", aFunc);
// some other stuff happens and when you need it...
$("#foo").on("click", aFunc);
// now you don't want it anymore
$("#foo").off("click", aFunc);
This is completely untested, but I think it might work.
It's important to note that to turn a handler .off(), you can't supply an anonymous function to .on(), that's why the function variable.

How to override click event in jquery

I am working with JavaScript and JQuery, there is a reference for click event from jquery.js,
Here I am trying to override the click event, its not happened.
Even though overridden still it is fairing old one not new one.
Is there any way to load event based on priority wise?
if I have understood correctly this works for you:
$('.xxx').off('click').on('click', function(e) {
e.preventDefault();
}
what you need to do is Call 'unbind' method first and then 'bind' method to write new click event of Jquery,
and also make sure that all Jquery Plugins loaded properly, below is an example :
$("#button").unbind("click").bind("click", function(){
alert("this is Overridden click event!");
});
Maybe you need to "unbind" click event which defined as inline attribute. In this case you can use $.removeAttr() method.
$(SELECTOR).removeAttr('onclick');
The .click() adds a new handler every time it's called, not overwrites an existing one.Execution will be in the order in which they were bind.
You can use $(id).unbind() to clear handlers on that element before adding the new one.

jQuery - Calling .trigger('click') vs .click()

In jQuery what is the better way to trigger an event such as click? Using the .trigger('click') function or calling .click()?
I have always triggered this event by using .click() but suddenly decided maybe I should be using .trigger('click') instead.
I use these event triggers to trigger event listeners created with .on('click', function(){...}).
I have checked the jquery api, searched other stackoverflow posts [ 1 ] [ 2 ] and I can see no reason to use one over the other.
I would be more inclined to use .trigger() to keep all event triggering consistent, as this can be used to call any event including custom events. But it would seem .trigger() does not work in all cases.
What is the best way to trigger an event? .trigger('click') or .click()?
If you're using .trigger() you have the advantage of being able to pass additional parameters, whereas .click() must be called without any.
Taken from the documentation:
$('#foo').bind('custom', function(event, param1, param2) {
alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
'Custom' and 'Event' are being passed to the event handler as param1 and param2 respectively
Besides that, the .click() is unlike other functions that implement get / set based on the number of arguments, because it implements trigger / set instead. Using a dedicated .trigger(), to me, is more logical.
One caveat to be aware of when using the jQuery method is that, in addition to being a jQuery method, .click() is also a DOM Level 2 native JavaScript method that can be called on HTML elements, such as <button> elements.
One place where this can become confusing is if you have a selector like this:
$("#element")[0].click();
There, you are actually calling the method on the DOM element. For instance, if you tried
$("#element")[0].trigger('click');
you would get an error that the element has no trigger method defined.
Be aware that $('#element')[0].click(); won't work in Safari, on certain elements. You will need to use a workaround.

Is there any way to use javascript (jquery) to make an element behave **exactly** as if it was clicked (a unique situation)

I want to make 'select' element to behave as if it was clicked while i click on a completely different divider. Is it possible to make it act as if it was clicked on when its not??
here is my code
http://jsfiddle.net/fiddlerOnDaRoof/B4JUK/
$(document).ready(function () {
$("#arrow").click(function () {
$("#selectCar").click() // I also tried trigger("click");
});
});
So far it didnt work with either .click();
nor with the .trigger("click");
Update:
From what i currently understand the answer is no, you cannot. Although click duplicates the functionality it will not work for certain examples like this one. If anybody knows why this is please post the answer below and i will accept it as best answer. Preferably please include examples for which it will not work correctly.
You can use the trigger(event) function like ("selector").trigger("click")
You can call the click function without arguments, which triggers an artificial click. E.g.:
$("selector for the element").click();
That will fire jQuery handlers and (I believe) DOM0 handlers as well. I don't think it fires It doesn't fire handlers added via DOM2-style addEventListener/attachEvent calls, as you can see here: Live example | source
jQuery(function($) {
$("#target").click(function() {
display("<code>click</code> received by jQuery handler");
});
document.getElementById("target").onclick = function() {
display("<code>click</code> received by DOM0 handler");
};
document.getElementById("target").addEventListener(
'click',
function() {
display("<code>click</code> received by DOM2 handler");
},
false
);
display("Triggering click");
$("#target").click();
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
And here's a version (source) using the onclick="..." attribute mechanism for the DOM0 handler; it gets triggered that way too.
Also note that it probably won't perform the default action; for instance this example (source) using a link, the link doesn't get followed.
If you're in control of the handlers attached to the element, this is usually not a great design choice; instead, you'd ideally make the action you want to take a function, and then call that function both when the element is clicked and at any other time you want to take that action. But if you're trying to trigger handlers attached by other code, you can try the simulated click.
Yes.
$('#yourElementID').click();
If you added the event listener with jquery you can use .trigger();
$('#my_element').trigger('click');
Sure, you can trigger a click on something using:
$('#elementID').trigger('click');
Have a look at the documentation here: http://api.jquery.com/trigger/
Seeing you jsfiddle, first learn to use this tool.
You selected MooTools and not jQuery. (updated here)
Now, triggering a "click" event on a select won't do much.
I guess you want the 2nd select to unroll at the same time as the 1st one.
As far as I know, it's not possible.
If not, try the "change" event on select.

does jquery have an equivalent of dojo.connect()?

Forgive my ignorance as I am not as familiar with jquery. Is there an equivalent to dojo.connect() ?
I found this solution : http://think-robot.com/2009/06/hitch-object-oriented-event-handlers-with-jquery/
But there isn't disconnect feature !
Do you know other solution in jquery ? There are jquery.connect but this plugin not work in my tests.
Thanks for your help,
Stephane
The closest equivalent jQuery has is .bind(), for example:
$("#element").bind('eventName', function(e) {
//stuff
});
And .unbind() to remove the handler, like this:
$("#element").unbind('eventName');
There are also shortcuts for .bind(), so for example click can be done 2 ways:
$("#element").bind('click', function() { alert('clicked!'); });
//or...
$("#element").click(function() { alert('clicked!'); });
There is also .live() (.die() to unbind) and .delegate() (.undelegate() to unbind) for event handlers based on bubbling rather than being directly attached, e.g. for dynamically created elements.
The examples above were anonymous functions, but you can provide a function directly just like dojo (or any javascript really), like this:
$("#element").click(myNamedFunction);
What do you mean by an equivalent to dojo.connect() ?
If you are willing to create your own custom event handlers, look at bind(), trigger() and proxy() in the Events.
The proxy() function will alow your to redefine what this points to in your callback function.
There isn't as such but you can acheive the same thing as follows:
$('#someid').click(function() { SomeFunc($(this)) });
That will wire somefunc, to the click event of control with id "someid". When the control is clicked the function will be called and the parameter will be a jquery object that refers to control that was clicked.
Update I have just done a bit more research and i think .delegate() is closer to what you want.
jQuery connect is equivalent to dojo.connect.

Categories

Resources