We Keep Coding

.on not working on dynamic html

I am creating drag and drop thing. When drop happens I create new runtime html and want to bind it event, so I have used following .on
.on ( "event", "selector", function() {
but its not working. Here is Snippet :
$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});
.on works before drag and drop. But afterwords nothing happens on clicking "button.edit-new-modal"!! What's wrong? Any solution?

try :
$(document.body).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});

This
$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
should be :
$(document).on( "click", "button.edit-new-modal", function() {

When you wire up event handlers, they are bound to the existing HTML elements only.
As and when you insert dynamic HTML, you must wire up these handlers again.
In your case, you can wrap the event handler setup in a function like this :
function wireUpHandlers() {
$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});
}
Call this method in your document.ready and then call this method again, after you have appened your dynamic HTML to the page

This is dynamic generated HTML so it will not work. Try using below code snippet
$(document).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});

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

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

jquery Replace DIV data and then track clicks on it

I have a <div id="myContainer"></div> .
I also have a button: <input type="button" value="Send" id="sendButton">
While clicking at the button: it replaces the DIV with another:
$( "#sendButton" ).click(function() {
$( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>");
});
I want to activate another function after click on a new button I've just put (<button id=\"mul\">*</button>):
$( "#mul" ).click(function() {
console.log(' mul clicked!');
});
Which doesn't work, the fact that I'm waiting for a click on a div that just created have something to do with it?

You need to attach event to #mul. Because it is appended dynamically, $("#mul").click() will not work.
.on() attaches event handlers to the currently selected set of elements.
Try:
$("body").on("click","#mul",function(){
console.log("mul clicked!");
});
More information here.

When you call $( "#mul" ).click(), you're attaching an event handler to #mul as it exists at that point. To fix this, just call $( "#mul" ).click() after you create #mul.
$( "#sendButton" ).click(function() {
$( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>");
$( "#mul" ).click(function() {
console.log( ' mul clicked!' );
});
});
You could also use jQuery's .on method with the optional selector, called a delegated event handler according to the documentation. Take a look at the API for jQuery if that's what you want: jQuery API documentation. The basic usage would be something like
$( document ).on( "click", "#mul", function( ) {
console.log( ' mul clicked!' );
});

use this
$(document).on("click","#mul",function() {
instead of
$( "#mul" ).click(function() {
or
$( "#sendButton" ).click(function() {
$( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>");
$( "#mul" ).click(function() {
console.log(' mul clicked!');
});
});

$( "#sendButton" ).click(function() {
$( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>");
// add listener here
$( "#mul" ).click(function() {
console.log(' mul clicked!');
});
$( "#mul" ).trigger("click"); // add this to your code
});
http://api.jquery.com/trigger/ see detail of trigger()
http://jsfiddle.net/tnnj5/ here is a demo
you must add listener after the new content has insert into dom

You can use .live() method to bind event with dynamically added content.
Try this:
$("#mul").live("click", function() {
console.log(' mul clicked!');
});
Try in fiddle
You can also use jquery .on(), But here you add dynamic content. So you need to use event delegation to register the event handler like:
$(document).on("click","body #mul", function() {
console.log(' mul clicked!');
});
Try in jsfiddle with on

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.