We Keep Coding

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();
});

Run javascript on btn but not container

I've got this:
http://jsfiddle.net/G3VjC/
which is simply:
$(document).ready(function() {
$(document).on('click','#btn',function(){
console.log('ran btn');
});
$(document).on('click','#containerdiv',function(){
console.log('ran div');
});
});
But when clicking the button is run the btn JS and the container JS (see console log).
How can I separate them?
thanks

use stopPropagation()
$(document).on('click','.meee',function(e){ // add event as argument
console.log('ran btn');
e.stopPropagation()
});

Try this
$(document).ready(function() {
$(document).on('click','#containerdiv',function(){
console.log('ran div');
});
$(document).on('click','.meee',function(){
console.log('ran btn');
return false;
});
});
Demo

Or try this:
$(document).ready(function() {
$('#containerdiv').click(function(){
console.log('ran div');
});
$('.meee').click(function(e){
e.stopPropagation();
console.log('ran btn');
});
});
As chumkiu already said, just use stopPropagation()

$(document).on('click','#btn',function(e){
e.stoppropagation();
var target = $(e.target);
if(!target.attr('id') == 'btn'){
e.preventDefault();
$(target.find("#btn)).trigger("click")
}
//any additional logic if the target was of the intended type.
});

How to fetch data and Trigger function from textbox using jquery?

<input id = "textboxid" type="text" onkeyup="invoke();" />
<script>
function invoke() {
var enteredData = $('#textboxid').val();
alert(enteredData);
}
</script>
This is working fine but i want to do it without using onkey attribute and only jquery

Try this
$(document).ready(function(){
$("#textboxid").keyup(function() {
alert($(this).val());
});
});
Hope it will help

Use the keyup jQuery event:
HTML
<input id = "textboxid" type="text" />
Javascript
$(function() {
$("#textboxid").on("keyup", function() {
alert($(this).val());
});
});

Check the JS Fiddle
http://jsfiddle.net/juGyc/
$(function() {
$("#textboxid").on("keyup", function() {
alert($(this).val());
});
});

can you please check this demo Demo
$(document).ready(function(){
$("#textboxid").keyup(function() {
alert($(this).val());
});
});
KeyUp : Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.

This will work for on Change or Blur
$("#textboxid").change(function(){
alert($(this).val());
});
blur Event

You can do this using jQuery's .bind() method. Check out the jsFiddle.
$(document).ready(function(){
$("#myTextBox").bind("change paste keyup", function() {
alert($(this).val());
});
});
OR
You can also bind events using jquery .On() -
$(document).ready(function(){
$("#textboxid").on("change paste keyup", function() {
alert($(this).val());
});
});
Try This
OR
Also bind the .change() event-
$(document).ready(function(){
$("#textboxid").change(function() {
alert($(this).val());
});
});

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;
}
});