We Keep Coding

the disable functionality is working if I give alert inside the function

I tried to disable the click functionality for the element with id #sports. It works if I invoke alert() inside the function, but I want it to work without invoking it. If I comment out that code, it's not working.
Here is my code:
$("#sports").off("click").on("click", function () {
alert("disable click");
});

You can disabled it with calling the off() method inside the on() method:
$("#sports").on("click", function (){ // on button click
console.log("click disabled"); // Do anything, console.log, alert, anything
$(this).off("click"); // then disable the click event, set it to off,
// this way the on click event won't fire
// again unless it's created, again
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sports">Click</button>

What about trying event.preventDefault()?
$("#sports").on("click", function (event){
event.preventDefault();
event.stopPropagation();
return false;
});
But if you want to disable it, you don't have to override its click function - it is enough to set 'disable' property of the DOM element:
$("#sports").disabled = true;

Jquery .on('click,'button' not working

I need to check if user closed browser. There is no reliable way, but the most accurate way seems to use onbeforeunload and check if a link or a button was clicked. I will also add f5 and some other extra checking.
But I have problem with button. If I click button, ajax call will be made even if there is if(window.link_was_clicked==false) condition.
<button onclick="setLocation('http://dev.site.com/checkout/')" class="button" title="Checkout" type="button"><span><span>Checkout</span></span></button>
And script:
jQuery(document).on('click', 'button', function(event) {
window.link_was_clicked= true;
});
window.onbeforeunload = function() {
if(window.link_was_clicked==false){
//make ajax call
}
};
It seems the problem is because there is setLocation function attached to button onclick. Is there any way to trigger jQuery(document).on first?

That variable doesnt exist on before load. so add it on the top and try again
window.link_was_clicked=window.link_was_clicked||false;
jQuery(document).on('click', 'button', function(event) {
window.link_was_clicked= true;
});
window.onbeforeunload = function() {
if(window.link_was_clicked==false){
//make ajax call
}
};

Since you haven't provided the code for setLocation(), I'll assume that that's where the problem is. Now, regarding a change to the order of execution of your click event handlers:
It is in general bad to have both embedded onclick and jquery-bound handlers, it leads to all sorts of confusion. If you can't change the html, however, you could do what this guy suggests: https://stackoverflow.com/a/7507888/2685386
$(document).ready(function() {
var myClick = $('button').attr('onclick');
$('button').removeAttr('onclick');
$(document).on('click', 'button', function(e) {
window.link_was_clicked=true;
// do my other stuff here....
eval(myClick);// this will now call setLocation()
});
});

How to get JQuery.trigger('click'); to initiate a mouse click

I'm having a hard time understand how to simulate a mouse click using JQuery. Can someone please inform me as to what i'm doing wrong.
HTML:
<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>
jQuery:
jQuery('#foo').on('click', function(){
jQuery('#bar').trigger('click');
});
Demo: FIDDLE
when I click on button #foo I want to simulate a click on #bar however when I attempt this, nothing happens. I also tried jQuery(document).ready(function(){...}) but without success.

You need to use jQuery('#bar')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/

You just need to put a small timeout event before doing .click()
like this :
setTimeout(function(){ $('#btn').click()}, 100);

This is JQuery behavior. I'm not sure why it works this way, it only triggers the onClick function on the link.
Try:
jQuery(document).ready(function() {
jQuery('#foo').on('click', function() {
jQuery('#bar')[0].click();
});
});

See my demo: http://jsfiddle.net/8AVau/1/
jQuery(document).ready(function(){
jQuery('#foo').on('click', function(){
jQuery('#bar').simulateClick('click');
});
});
jQuery.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE Boss!
}
});
}

May be useful:
The code that calls the Trigger should go after the event is called.
For example, I have some code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
$(function() {
$("#expense_tickets").change(function() {
// code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
});
// now we trigger the change event
$("#expense_tickets").trigger("change");
})

jQuery's .trigger('click'); will only cause an event to trigger on this event, it will not trigger the default browser action as well.
You can simulate the same functionality with the following JavaScript:
jQuery('#foo').on('click', function(){
var bar = jQuery('#bar');
var href = bar.attr('href');
if(bar.attr("target") === "_blank")
{
window.open(href);
}else{
window.location = href;
}
});

Try this that works for me:
$('#bar').mousedown();

Technically not an answer to this, but a good use of the accepted answer (https://stackoverflow.com/a/20928975/82028) to create next and prev buttons for the tabs on jQuery ACF fields:
$('.next').click(function () {
$('#primary li.active').next().find('.acf-tab-button')[0].click();
});
$('.prev').click(function () {
$('#primary li.active').prev().find('.acf-tab-button')[0].click();
});

I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements.
Then I reverted back to .trigger() it also worked at safari for windows.
So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.

Just use this:
$(function() {
$('#watchButton').trigger('click');
});

You can't simulate a click event with javascript.
jQuery .trigger() function only fires an event named "click" on the element, which you can capture with .on() jQuery method.

jQuery on(click) doesn't work but on(hover) does

After initialize js I create new <div> element with close class and on("click") function doesn't work.
$(document).on('click', '.post-close', function () {
alert("hello");
});
but on('hover') work perfectly.
$(document).on('hover', '.post-close', function () {
alert("hello");
});
but I need to make it work on click.

It's because you're not preventing the default behaviour of the browser. Pass e into your handler and then use e.preventDefault()
$(document).on('click', '.post-close', function (e) {
e.preventDefault();
alert("hello");
});
Edit
Also, bind the handler before creating the new <div>

why not use something like
$('.post-close').click(function(){
//do something
});
If the element was added dynamically use:
$(document).on('click', '.post-close', function(){
//do something
});
edit:
like danWellman said, you can add the preventDefault IF you want to make sure no other code is executed. otherwise use the code above.
edit2:
changed the .live to .on

It's an old post but I've had a exactly same problem (element created dynamically, hover works, but click doesn't) and found solution.
I hope this post helps someone.
In my case, I found ui-selectable is used for parent element and that was preventing from click event propagate to the document.
So I added a selector of the button element to ui-selectable's 'cancel' option and problem solved.
If you have a similar probrem, check this
Try turn of libraries for parent element
You're not using stopPropagation() in parent element ?

How to check if there is already a click/event associated to an element

lets say I have
function trigger(){
$('a.pep').each(function(){
$('a.pep').click(function(){
console.log($(this).val());
});
});
}
function push(){
$('body').append('<a class="pep">hey mate i have no trigger yet</a>');
trigger(); //now i do but the others have duplicated trigger
}
$(document).ready(function(){
$('a.push').click(function(){
push();
});
});
So it seems that the click event is being applied twice/+ because the console.log is lauched more than once by click
How can i prevent this?

The problem is that you call $('a.pep').click() lots of times. (In fact, you bind as many click handlers as there are matching elements to each element. And then you do it again every time one of them is clicked.)
You should lever the DOM event bubbling model to handle this. jQuery helps you with the on method:
$(document.body).on('click', 'a.pep', function() {
console.log('element clicked');
$(document.body).append('<a class="pep">Click handlers handled automatically</a>');
});
See a working jsFiddle.
Note that I have removed the val call, because a elements can't have a value... Note also that the on method is introduced in jQuery 1.7; before that, use delegate:
$(document.body).delegate('a.pep', 'click', function() {

Small change to your trigger function is all you need. Just unbind the click event before binding to ensure that it is never added more than once. Also, you don't need to use each when binding events, it will add the event to each item automatically.
function trigger(){
$('a.pep').unbind('click').click(function() {
console.log($(this).val());
});
}

You can check using data('events') on any element if the required event is attached or not. For example to check if click event is attached or not try this.
if(!$('a.pep').data('events').click){
$('a.pep').click(function(){
console.log($(this).val());
});
}

you should use jQuery live here because you add DOM elements dynamicly and you want them to have the same click behaviour
function push(){
$('body').append('<a class="pep">hey mate i have no trigger yet</a>');
}
$(document).ready(function(){
$('a.push').click(function(){
push();
});
$('a.pep').live('click', function(){
console.log($(this).val());
});
});

Try:
if($('a.pep').data('events').click) {
//do something
}

i think if you use live() event you dont need to make function
$('a.pep').live('click', function(){
console.log($(this).val());
});