Develop Reference

jQuery .on trigger event listener

There is a best practice to invoke a jQuery change handler immediately afters its definition to re-use the code and initialise the GUI, like
$("#mySelect").change(function() {
$("#myTextField").val( $(this).text());
}).change(); // here the element is immediately triggered, so one does not need a separate code path for the init-case
Without the immediate call using .change() the GUI would not reflect the initial value of #mySelect in #myTextfield.
With newer versions of jQuery I would like to use event-delegation and do the same stuff using the .on() API.
$("#myForm").on('change', '#mySelect', function() {
$("#myTextField").val( $(this).text());
}).change();
This does not work anymore, because the .change() is not triggered on the right element and not with the right event.target, so jQuery can't call my event handler.
This works, but does no longer reflect the best practice without the separate init code-path:
$("#myForm").on('change', '#mySelect', function() {
$("#myTextField").val( $(this).text());
});
$("#mySelect").change();
Question: Any good way to solve this, without re-selecting the element and triggering the event?

You would need to find all the elements and call trigger on them... Because delegation delegates the handling to some other element up the DOM (as you likely know)
You would essentially have to do what you have done in your 3rd example. I know of no other way to achieve this.

hover and moveout not giving expcted result

Because I am creating DOM using Jquery it was difficult to copy the output so i am adding one image of code that i have captured using one tool
i have attached hover and mouseout event to id='nf1' using this code
$("#nf"+n).hover(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
});
$("#nf"+n).mouseout(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
});
Here n is post_id and i am looping all post_id got from response.This attach events but not giving expected behaviour Like when mouse over to id='nf1post_delete' it is hide
Please ask if any doubts

The way you're describing this, you will actually want to pass two functions to .hover(), one for the action on mouseenter and one for the action on mouseleave. You can pass only one function to .hover(), but it will run that function when you roll over and when you roll out.
http://api.jquery.com/hover/
So, try this instead:
$("#nf"+n).hover(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
},function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
});
The .mouseout() function isn't needed at all.

At first, .hover() includes mouseenter and mouseleave. Do you put both function in there and don't use an additional event. Also don't use mouseout(). Use instead mouseleave().
So you either use hover(function(){},function(){}); alone, or you use mouseenter() and mouseleave().

Since you're manipulating the DOM, I'm going to recommend using jQuery .on() instead of .hover():
$(document).on({
mouseover: function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
},
mouseout: function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
}
}, "#nf"+n);
If you're creating something in the DOM after the page has loaded, .on() helps to attach event listeners to it.
jQuery API for .on()

How to trigger a js function with Jquery

I want to trigger this jquery function by using trigger method of JQuery. How can I do that ? Actually I dont even know the trigger method is suitable for user defined functions.
$('a.pop').click(function() {alert('testing'); }
this is not working
$('a').trigger(testtt);
var testtt = function(){ alert('aaa');}

Very similar to the way you install the event handler:
$('a.pop').click();
If you have the name of the event you want to trigger as a string, you can also do it this way:
$('a.pop').trigger('click');
This is also the solution to use if you want to pass crafted data to the event handler -- trigger also accepts a second parameter.

You can trigger a click event on the element by simply running
$('a.pop').click()

$('a.pop').click(), or if you're triggering some dynamic method, or custom event:
$('a.pop').trigger(eventName), e.g: $('a.pop').trigger('click');

Reading from jQuery API, the following should work.
$('a.pop').trigger('click');

.trigger() is used to trigger event handlers (custom or built-in'). Since you bound your function to the "click" handler, you can use trigger like so to call it:
$('a.pop').trigger('click');
jQuery's event binding methods can also be called without parameters to trigger them, which means you can also do this:
$('a.pop').click();

Triggering anchor click within a table using jquery

I am using the below code to trigger the anchor click within the table compareTable, but it does not seem to take any effect. Can any1 point out the solution?
$('#compareTable a').click(function() {
alert("hi");
});
Here is the demo

The <a> tag doesn't exist at the time you bind that click handler. You can solve this by using .delegate() or .live() (or binding the handler when you create the element). The former is usually considered preferable, but I find you markup difficult, so I'll share a quick workaround with .live(). Simple as can be:
$('#compareTable a').live('click', function() {
alert("hi");
});

jQuery's methods are two-folded. If you call them with empty arguments (that is, you don't pass any argument), then do what they mean. $('#something').click() means that it would be clicked. If you provide an argument which is usually a callback handler, they just register that handler. So, you should use:
$('#copareTable a').click();
And of course, since you don't want to click those links without any reason, you probably should write this code in response to another event. Something like:
$('#register').click(function(){
$('#compareTable a').click();
});
And also don't forget that $('#comparetTable a') is a collection of all anchor links inside that table. So if you send click directive, all of them would be clicked.

Why jQuery on click event not getting triggered?

I have an group of checkboxes with id's starting with somename and I want catch the click event of these checkboxes. Previously I have done this through jQuery. i.e.:
$("input[id^='somename']").click(function(){
// my code follows here
})
but this is not working this time around. Why?
P.S. The element is created via JavaScript after the page is fully loaded after making some ajax request. I don't know if this may be the problem?

just use live if elements are created after the page is loaded.
$("input[id^='somename']").live('click', function(){ // my code follows here })
P.S : Your search selector is "somename" but you search it on the attribute ID, are you sure that you don't want :
$("input[name^='somename']").live('click', function(){ // my code follows here })
instead?

This indeed could be the problem. Replace .click with .live()
$("input[id^='somename']").live('click', function(){ // my code follows here })
and you should be fine.
Since a call to .click is just a shortcut for .bind('click', fnc), this will not work if the element is not in the DOM when calling this. Even better than using .live() would be to use .delegate(). Have a read:
.live(), .delegate()

Using the standard binding functions only works on elements that exist at the time of the bind. You need to use something called event delegation, where elements further up the DOM tree are notified of events on descendant elements. The best way to do this is with .delegate():
$('#containingElement').delegate("input[id^='somename']", 'click', function(){
// your code here
});
This assumes that you have an element #containingElement that contains all the elements that you want to capture the events on.
NB that other answers recomment live. live and delegate use the same backend code, but for various reasons delegate is more efficient.

I believe that because you want this applied to dynamically created elements in the DOM you are going to have to use the the jQuery .live() method:
$("input[id^='somename']").live('click', function(e) {
// Your code
});

Instead of .click() try .change() event.