Develop Reference

When user clicks on one element, trigger a click on another.

I have some links on my page and I need to programmatically perform a click on an element when the user clicks on another element. For example, when I click on element A, jQuery should perform a click on element A2.
I don't know what this is called, technically, and I'm having trouble finding out how to do this. Is this possible in jQuery?

Attached an event handler to your first element (#elementA in the example below) and then trigger a click event on the second element (#elementB below)
$("#elementA").on("click", function (e) {
$("#elementB").click();
});
Here is the Fiddle: http://jsfiddle.net/mifi79/Dar8J/

Use following to do trigger event,When div1 is clicked , Trigger click event for div2
$("#div1").click(function (){
$("#div2").trigger("click");
});
Working demo http://jsfiddle.net/MSSbT/

You can trigger a click via click()
http://api.jquery.com/click/#click

How do I handle the event of an element getting added to the page?

I have an app where clicking a link brings up a modal. In the modal is a form. I need to monitor for that form's submission.
I'm attaching a click handler in my JS like so:
$('.vex-dialog-form :submit').click (event) ->
alert "hi"
That alert isn't firing, I believe it's because I need to attach some kind of event handler for that modal loading then put the submit event inside of that.
Any suggestions on how to go about this?

you need event delegation for dynamically added DOM. use .on():
$('.vex-dialog-form').on('click',':submit',function(){
alert("hi");
});
if parent .vex-dialog-form is also getting added dynamically, then use:
$(document).on('click','.vex-dialog-form :submit',function(){
alert("hi");
});

Try this way:
$(document).on('click', '.vex-dialog-form :submit', function(){
alert('hi');
});
In this case document is waiting for click and after it gets clicked, jQuery finds out whether your submit button is clicked or not

Tooltipster plugin not firing jquery function when button or any click even occur

I want to use Tooltipster plugin which click an element in the body to show the tooltip and I want to have a close button inside the tooltip to close it.
However I use Jquery click() function to handle it but it won't fired.
I tried the solution in this post. It worked only when the tooltip is triggered by hover event.
Tooltipster plugin not firing jquery function when link in in the tooltip is clicked
The original solution using hover in jsfiddle
trigger: 'hover',
Instead using click to show the tooltip
trigger: 'click',
http://jsfiddle.net/bCqyL/7/
It won't fire any click event in jquery block. It can captured by a normal javascript function only.
I checked it should be some code in the Tooltipster plugin locked and captured all "click()" event inside the tips when in click trigger mode.
I tried other event like onchange event of radio button is fired when using the code in original solution

#Evan is right. Your Tooltip doesn't exist in the DOM and you can't bind/delegate any action to it (even if you go all the way back to $(document) after DOMReady).
If you're after a close button inside of the Tooltip try the following code, it's worked for me (and JSFiddle!):
JavaScript
$('.tooltip').tooltipster({
// Required, but have a fiddle around
'interactive': true,
'contentAsHTML': true,
'autoClose': true,
'trigger': 'click',
'onlyOne': true,
// ...
// The coup de grâce ...
'functionReady': function(){
$('.tooltipster-default .close').on('click', function(e){
e.preventDefault();
$('body').click();
});
}
});
HTML
<span class="tooltip" title="<h3>Title <a title='Close' href='#' class='close'></a></h3><p>This is my tooltip content!">I have a tooltip!</span>
The JSFiddle
http://jsfiddle.net/hpKST/1/
Why it works
The combination of autoClose and trigger help in closing the Tooltip whenever a person clicks outside the interactive Tooltip. The functionReady callback allows you to bind a function to take advantage of this and delegate a function to click the body while the Tooltipster is open, thus closing the Tooltip.
I hope this helps! :)

That's because the HTML does not exist in the DOM when you try to bind your function.
Insert your content as jQuery object instead and make your bindings on it.
Edit : my answer is wrong, because the user has a delegated handler, I missed that. I give the right answer here : https://github.com/iamceege/tooltipster/issues/145

Open hidden div from bootstrap popover

I have a hidden div on page which needs to be opened on click function.
The click-able link is inside the bootstrap popover so how can I get the page div opened by clicking on popover content link.
here is the Fiddle
$( "#open" ).click(function() {
$('.open-this').slideToggle("slow");
});

instead of this code:
$( "#open" ).click(function() {
$('.open-this').slideToggle("slow");
});
try this
$("body").on("click","#open",function(e) {
e.preventDefault();
$('.open-this').slideToggle("slow");
});
check out the updated fiddle http://jsfiddle.net/bfkLM/15/
The problem on your code is that the link is generated from your code and not presented in the dom when your event handler is trying to get it to attach the click event to it.
so the solution is to use Delegated events:
from the official; jquery website
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers. This
element could be the container element of a view in a
Model-View-Controller design, for example, or document if the event
handler wants to monitor all bubbling events in the document. The
document element is available in the head of the document before
loading any other HTML, so it is safe to attach events there without
waiting for the document to be ready.
that's why my new code will work because it attaches the event handler to the body tag and checks that a click event is coming from my target element (open), when this happen it will fire up my code and the popup will be displayed
one more thing, the use of e.preventDefault(); is to prevent the page from navigating to the href property of your anchor.

The event is not attached to the link, because I guess you aren't doing it after document is ready.
For testing purpose I've added onclick function to the link
onclick="$(\'.open-this\').slideToggle("slow");return false;"
and it worked.
Fiddle
Solution:
$(function(){
$( "#open" ).click(function() {
$('.open-this').slideToggle("slow");
return false;
});
});

Add a click event that happens after inline click event?

Using jQuery, I want to add a click event to a search button that happens after the event that is already tied to that button in the HTML (the other click event is in the tag's onclick event, it is NOT added by javascript).
I've tried using .click(function() {...}); but that event will fire before the inline onclick event already on the button. How can I run my click event after the first one has completed?

One thing you can do is grab the inline events when the page loads and evaluate them before your custom click event code.
Something like this:
var events = $('#someAnchor').attr('onclick');
$('#someAnchor').removeAttr('onclick');
$('#someAnchor').click(function(){
eval(events);
alert("We came second");
})
Here's a quick example: http://jsfiddle.net/vkVuP/