We Keep Coding

jQuery want to override function on button click

I already have a jQuery .on() function in which click event is passed on a button.
I want to restrict user from clicking button more than 1 but i don't want to alter current function instead write new function
$('button').on('click', function() {
alert('hi');
});
$('button').click(function(event) {
var count = 0;
count = count + 1;
if (count > 1) {
event.preventDefault();
console.log('dont call alert');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Click Me !</button>

I think you are looking for something like following.
$('button').on('click', function () {
alert('hi');
});
var isCliked = true;
$('button').click(function () {
$('button').off('click');
isCliked && $('button').click(function() {
console.log('dont call alert');
isCliked = false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Click Me !
</button>

JQuery off() method remove event handler of element. You can remove click event of button when it clicked. Using this work, button click event fired only once.
$("button").click(function(event){
alert();
$(this).off("click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button</button>

You can use jQuery .one() method:
$('button').one('click', function() {
alert('hi');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Click Me !</button>

:not() on click event still firing

I have the following example structure:
<div class="modHolder">
<div id="wData">...</div>
</div>
I want something to happen if .modHolder is clicked but nothing to happen if #wData is clicked.
This is what I'm trying but #wData is still reacting to the click:
$(document).on('click', '.modHolder:not("#wData"), .modClose', function(e) {
...
}
Any ideas why?

Here's how to do it, use this for clicking .modHolder:
$(document).on('click', '.modHolder, .modClose', function(e) {
...
});
and then add this:
$(document).on('click', '#wData', function(e) {
e.stopPropagation();
});
This will stop the clickEvent to bubble up the DOM-tree.
Check it out here: JSFiddle

Your selector is wrong. Try replacing
'.modHolder:not("#wData")'
with
'.modHolder div:not("#wData")'
Here's a fiddle:
http://jsfiddle.net/muywo9qp/

It should rather be:
$(document).on('click', '.modHolder', function(e) { ... });
$(document).on('click', '#wData', function(e) {
e.stopImmediatePropagation();
});
$(document).on('click', '.modHolder', function(e) {
alert('Here');
});
$(document).on('click', '#wData', function(e) {
e.stopImmediatePropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modHolder">
<div id="wData">.....</div>
<div class="modClose">X</div>
</div>

Click not working, only touchstart mousedown

How do I bind 'click' to a paragraph?
I have the following function:
$(document).on('touchstart mousedown',"p span.text", function(e) {
console.log('I was clicked');
*more code here*
});
If I replace 'touchstart mousedown' with 'click', the function is no longer fired.
PS: I'm SUPER new to JS, so I might be doing something wrong.

Try:
$("p span.text").on('click', function(){
console.log('I was clicked');
});

How do I bind 'click' to a paragraph
Try to attach click event to your paragraph instead of span:
$(document).on('touchstart mousedown click',"p", function(e) {
console.log('I was clicked');
});

This also works:
According to your reply, updated
$(document).on('click',"p span", function(e) {
console.log('I was clicked');
});

how to cancel some click events in document in JQuery (not all of them)

Click on the document, the .area div disappears.
$(document).on('click', function() {
$('.area').hide();
});
$(document).off('click', '.red', function(e) {
e.stopPropagation();
});
In this case, how can I apply stopPropagation to .red. I'd like to keep this js format, as I will need to add more class names.
Online Sample http://jsfiddle.net/ku9cj/1/
Thanks

off() is used to remove the event handler; you need to use .on()
$(document).on('click', '.red', function(e) {
e.stopPropagation();
});
Demo: Fiddle

You should not attach handlers to the document, as they bubble up very slowly. If you must do so, try the following:
$('body').on('click', function() {
$('.area').hide();
});
$('.red').on('click', function(e) {
e.stopPropagation();
});
Or, if you insist on using a delegate and do not have a closer parent element:
$('body').on('click', '.red', function(e) {
e.stopPropagation();
});

Two listeners on one element: let only one fire

In situations where multiple event handlers are operating on a single element and action, how can I force only one of the events to fire? JSFiddle.
$("#buttons").on("click", "button", function(){
// only do this if the event below isn't fired
});
$("#buttons").on("click", "button.red", function(){
// if this one happens, don't do the above one
});

For a more general solution, event.stopImmediatePropagation() will prevent the event from triggering any more handlers. For handlers bound to the same element, the order they are bound seems to matter. You could also bind the one that you conditionally don't want to fire to an element higher in the DOM and use e.stopPropagation():
$(document).ready(function(){
$("#buttons").on("click", ".red", function(e){
e.stopImmediatePropagation();
$(this).css("color","red");
});
$("#buttons").on("click", "button", function(){
$(this).css("background","blue");
});
});
http://jsfiddle.net/Ef5p7/
Here's how you could use stopPropagation() instead:
<div id="buttonsOuter">
<div id="buttons">
<button>turn blue</button>
<button class="red">only turn text red</button>
<button>turn blue</button>
<button>turn blue</button>
<button>turn blue</button>
</div>
</div>
...
$(document).ready(function () {
$("#buttons").on("click", ".red", function (e) {
e.stopPropagation();
$(this).css("color", "red");
});
$("#buttonsOuter").on("click", "button", function () {
$(this).css("background", "blue");
});
});
http://jsfiddle.net/CwUz3/

Change the first event handler to:
$("#buttons").on("click", "button", function(){
$(this).not('.red').css("background","blue");
});
jsFiddle example

$("#buttons").on("click", "button, button.red", function(){
// if this one happens, don't do the above one
});

Try using :not() http://api.jquery.com/not-selector/
$(document).ready(function(){
$("#buttons").on("click", "button:not(.red)", function(){
$(this).css("background","blue");
});
$("#buttons").on("click", "button.red", function(){
$(this).css("color","red");
});
});
Here's the working fiddle:
http://jsfiddle.net/SpFKp/4/

Try this,the functions will be called but you can add condition to not run the code:
var functionCalledFlag =false;
$("#buttons").on("click", "button", function(){
if(!functionCalledFlag ){
functionCalledFlag =true;
// only do this if the event below isn't fired
}else{
functionCalledFlag =false;
}
});
$("#buttons").on("click", "button.red", function(){
if(!functionCalledFlag ){
// only do this if the event above isn't fired
functionCalledFlag =true;
}else{
functionCalledFlag =false;
}
});