We Keep Coding

select div but not inputs within div jquery

I'm trying to select a div for a click event but not the inputs within said div. I thought this would do it but it does not work. here is a demo. Thank you
html
<div id = "test"><input></div>
js
$('#test:not(input)').click(function(){
alert();
});

You could check to see if the clicked element is an input element using !$(e.target).is('input')
Updated Example
$('#test').on('click', function (e) {
var $target = $(e.target);
if (!$target.is('input')) {
alert('clicked');
}
});

When you click on the input, the click event bubbles to the div above it.
You can stop this by calling stopPropagation or stopImmediatePropagation on the event object.
http://jsfiddle.net/t66f06oL/1/
$( '#test' ).on( 'click', function() {
alert();
} );
$( '#test' ).on( 'click', 'input', function( e ) {
e.stopImmediatePropagation();
} );

When you click on the input control your click event is actually caught by the parent div. You can fix this by changing your code to this:
$('#test:not(input)').click(function(){
alert();
});
$('#test').find('input').click(function(e){
e.stopPropagation();
});

jquery slidetoggle how to set if mouse click other, close slidetoggle

I using jquery slidetoggle to show a DIV
but I need set if mouse click not in div.list go close this slideToggle
$( "#list_button" ).click(function() {
$( ".list" ).slideToggle( "fast" );
});
I only found if mouseout.... I cant find how to set if click any "anywhere on the page" to close this toggle
for testing : http://jsfiddle.net/sdgwbyv8/

$( "body" ).click(function( event ) {
if(
event.target.className!='list' && event.target.parentNode.parentNode.className!="list"
) {
$( ".list" ).slideToggle('fast');
}
});
Demo: http://jsfiddle.net/sdgwbyv8/9/ One possible solution, i guess there are better ones....

You can do it by event.stopPropagation():
$("#list_button").click(function (event) {
if ($(".list").is(":hidden")) {
event.stopPropagation();
$(".list").slideToggle("fast");
}
});
$('body').click(function () {
$(".list").hide();
});
$(".list").click(function (event) {
event.stopPropagation();
});
Working Fiddle

$( "input" ).change(function () in Kendo

I need to track if an element and if ye which element is changed in a form.
The $( "input" ).change(function () { handler is not firing in Kendo UI. My code is
$( "input" ).change(function () {
alert('aaaa');
event.preventDefault();
});
what am I doing wrong? Or is there a more proper way in kendo?

I think you are looking for keyup event.
$("input").keyup(function () {
alert('aaaa');
});
Demo
Change event for input only fires when focus is lost after changing value. See this

Give your input (for example #target) and them:
jQuery( ".target" ).change(function() {
alert( "aaaaa" );
});

same function for Mouse Click and Key Press

I want to call a function in jquery when mouse click or key press is occure
one way is to write same code twice for this both event but it is not proper way
can any one tell me how it is possible?

write a function
function Process(){
//Put all your logic
}
call the function in all the event
$("some element selector").on("click keypress",function() {
Process();
});
or any other click event.

If you want to register both handlers to the same element then you can use .on() to register handler for multiple events
$('myelementselector').on('click keypress', function () {
//mycode
})

Use the on method.
$("some element selector").on("click keypress",function() {
//do something
});

yes you can use like
<input type="text" />
$(document).on("click mouseenter","input",function(){});

Try this:-
$(element).on('click keypress keydown', function() {
});

Write only one function & call it on both event.
$( "#target" ).keypress(function() {
funABC();
});
$( "#target" ).click(function() {
funABC();
});
function funABC(){alert("DONE");}
One more shortcut :
$( "#target" ).click(function() {
$( "#target" ).keypress();
});
$( "#target" ).keypress(function() {
funABC();
});

You also use :
$( "input" ).on('keypress mouseup',function() {
alert('done');
});
or
$( "input" ).on('keypress mouseup',fun);

Fire click event on header after sorting column

I am using table sorter plugin on my table //http://tablesorter.com/docs/index.html
And I want fire an event on click of the header that after sorting the column, I am trying as below
$("tableId").tablesorter();
$("thead th").click(function () {
alert("hi");
});
But want happens is my event fires first than plugin event, i want my event fire after the plugin's event...
Any Idea Plz...................

With jQuery 1.3+ :
$( "thead th" ).live( "click", function() {
alert( "hi" );
});
With jQuery 1.4.3+ :
$( document ).delegate( "thead th", "click", function() {
alert( "hi" );
});
With jQuery 1.7+ :
$( document ).on( "click", "thead th", function() {
alert( "hi" );
});
More here (http://api.jquery.com/live/)

You can bind to the sortEnd event which triggers after the table has sorted (demo; javascript is way at the bottom of the page):
$(function() {
$("table")
.tablesorter()
.bind("sortEnd",function() {
alert("hi");
});
});
I wouldn't fire another click event on the header within this event callback as you will create an infinite loop of clicking and sorting.
Also, in case you are interested, I have a fork of tablesorter with lots of improvements.