We Keep Coding

How to simulate a click event when document onready?

The two method below are not working for me; I need the button click event to fire with the document onready event. (#usrpost is a button element.)
$(function() {
$("#usrpost").trigger("click");
$("#usrpost").live("click",function() {
//do something.
});
});
I've also tried the following:
$(function() {
$("#usrpost")[0].click();
$("#usrpost").live("click",function() {
//do something.
});
});

You need to trigger the event after the handler is added(apart from the spelling issue, also assuming you are using jQuery < 1.9)
$(function () {
$("#usrpost").live("click", function () {
//do something.
});
//fire it after the handler is added
$("#usrpost").click();
});
Note: If you are using jQuery >= 1.7 use .on() instead of .live()

$(function() {
$("#usrpost").on("click", function() {
//do something.
});
$("#usrpost").click();
});
You had a typo in "function"

You must call the .click() after bind the event:
$(function() {
$("#usrpost").live("click",function() {
//do something.
});
$("#usrpost")[0].click();
});
.live() is also now deprecated in favour of .on():
$(function() {
$('body').on('click', "#usrpost", function() {
//do something.
});
$("#usrpost")[0].click();
});

You can trigger the event too
$("#usrpost").trigger("click");

Function calls inside jQuery plugin

I've nearly this code for defining the plugin instance:
$.fn.someplugin = function(opts) {
$(document).on('click', '.option-1', function() {
alert(1);
});
};
I use some code like this one to make my plugin work:
$('.selector-1').someplugin();
So jQuery in this way binds likely one click event listener to the document.
The question is, when I use my plugin multiple times, does it mean that jQuery binds 10 click events to the document?
$('.selector-1').someplugin();
$('.selector-2').someplugin();
$('.selector-3').someplugin();
$('.selector-4').someplugin();
$('.selector-5').someplugin();
$('.selector-6').someplugin();
$('.selector-7').someplugin();
$('.selector-8').someplugin();
$('.selector-9').someplugin();
$('.selector-10').someplugin();
In this way it binds 10 click listeners - because fn.someplugin is called 10 times, or just one?

Yes, it binds 10 click listeners to the $(document) object.
Every time you call someplugin() it will bind a new listener.
JSFIDDLE
If you want to add a single click handler to the document (inside of your plugin) you can do this:
(function ($) {
$.fn.someplugin = function(opts) {
alert("Another someplugin call.");
};
$(document).on('click', '.option-1', function() {
alert(1);
});
})($);
JSFIDDLE

You can do this to bind only one time :
(function ($) {
$.fn.someplugin = function (opts) {
return $(this).each(function (index, value) {
$(document)
.off('click', '.option-1')
.on('click', '.option-1', function (event) {
event.preventDefault();
alert(1);
});
});
};
})(jQuery);
$(document).ready(function () {
$('.selector-1, .selector-2').someplugin();
});
$(this).each allows you to bind multiple selectors.
.off() unbinds the event if it exists.
jsfiddle : http://jsfiddle.net/rWYS4/

$(document).ready listeners not running on dynamic content

I have a $(document).ready function that sets up listeners for certain elements. However, all of the #leave-ride elements are added dynamically.
Listeners:
$(document).ready(function() {
$("#post-ride").click(function() {
addRide(currentDriver, $(destinationInput).val(), $(originInput).val(), $(dateInput).val(), $(timeInput).val());
$.getScript("scripts/myRides.js", function() {});
});
$("#request-ride").click(function() {
requestRide(currentDriver, $(destinationInput).val(), $(originInput).val(), $(dateInput).val(), $(timeInput).val());
$.getScript("scripts/myRides.js", function() {});
});
$("#leave-ride").click(function() {
console.log("leave Ride");
leaveRide(currentDriver, $("leave-ride").closest("div").attr("id"));
$.getScript("scripts/myRides.js", function() {});
});
});
What do I need to do to get that listener to listen to dynamic content?

Yes, ready runs only once. You can use event delegation:
Take the element closest to the #leave-ride which is not loaded dynamically (document in extreme cases). Then attach the handler on it, and use #leave-ride as the selector for the delegated event.
Assuming a div having the id #container is that static element:
$('div#container').on('click', '#leave-ride', function(){…});
See also Event binding on dynamically created elements?

Use on, change your event declaration
$("#post-ride").click(function() {
to
$("body").on('click',"#post-ride",(function() {

Use .on()
Example:
$("#leave-ride").on('click', function() {
console.log("leave Ride");
leaveRide(currentDriver, $("leave-ride").closest("div").attr("id"));
$.getScript("scripts/myRides.js", function() {
});
});

HTML content is not getting on Jquery click function

In my code I have the following:
$(document).ready(function(){
$("input#Addmore").click(function(){
$('div#add_div').append("<a class='remove' href='#'>X</a>");
});
});
This code on click of add more button and I want to remove parent div of above added code on click of "X" by jquery. for that purpose i am using this code
$("a.remove").click(function(){
$(this).closest("div").remove();
});
But the code is not working because jQuery did not getting append anchor code. Can any one tell me the solution?

You need to delegate the event to the nearest static element. Try this:
$('#add_div').on('click', 'a.remove', function() {
$(this).closest("div").remove();
});
Or if you are using an older version of jQuery (less than 1.7) use delegate() like this:
$('#add_div').delegate('a.remove', 'click', function() {
$(this).closest("div").remove();
});

Try this
$('#add_div').delegate('a.remove', 'click', function() {
$(this).closest("div").remove();
});

Or you can try this:
$("input#Addmore").click(function(){
$("div#add_div").append("<a class='remove' href='javascipt:;' onclick='remove(this);return false' href='#'>X<br/></a>");
});
and here is remove function:
window.remove = function(obj)
{
$(obj).closest('div').remove();
}
see here : http://jsfiddle.net/Hvx2u/3/

Jquery dynamically create link

I have a piece of JQuery that creates a row in a table and in one of the cells there is an X that is surrounded by a class. When it is dynamically created and then clicked on the click listener does not fire.
Here is the code.
$('#add').click(function() {
$( '#table' ).append('<td class="x">X</td></tr>');
});
$('.x').click(function() {
alert('Fired');
});

Since the <td> element does not yet exist when you register your event handler, you have to use live() or delegate() for the handler to be triggered later:
$(".x").live("click", function() {
alert("Fired");
});

$(".x").live("click", function()
{
alert("Fired");
});
Live adds events to anything added later in the DOM as well as what's currently there.

Instead of
$('.x').click(function() {
alert('Fired');
});
Change to this
$('.x').live('click', function() {
alert('Fired');
});
It binds the click function to any created element with class x

You need to use the .live function for content that's dynamically generated.
so replace
$('.x').click(function() {
with
$('.x').live('click',function() {

You are first creating the listener to all .x elements (of which there are presumably zero), then later adding new .x elements.
There are two solutions: one is to use jQuery live, the other is to rewrite your code:
var xClickHandler = function() {
alert('Fired');
};
$('#add').click(function() {
$('#table').append(
$('<td class="x">X</td></tr>').click(xClickHandler);
);
});

Use live instead of click:
$('.x').live("click", function() {
alert('Fired');
});

The html you are appending to the table has a typo, you have missed out the beggining tr tag:
$('#add').click(function() {
$( '#table' ).append('<tr><td class="x">X</td></tr>');
});
$('.x').click(function() {
alert('Fired');
});

I think you need to use the live method. http://api.jquery.com/live/
$('.x').live('click', function() {
// Live handler called.
});