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

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

How to get title attribute from link within a class with javascript

I am trying to pull the title attribute from links within a class and having a bit of trouble:
<div class="menu">
United States
Canada
</div>
And here's what I've tried:
function cselect(){
var countryID = $(this).attr("title");
location.href = location.href.split("#")[0] + "#" +countryID;
location.reload();
}
Thanks!

Pass in this to your inline handler:
function cselect(obj){
var countryID = $(obj).attr("title");
console.log(countryID);
}
United States
Canada
Demo: http://jsfiddle.net/yDW3T/

You must refer to the clicked element. One way is to pass this, as tymeJV suggested.
But I would set the event handler from a separate script block and just refer to the current element. For both of the following two solutions no additional inline onclick attribute is required.
/* using jQuery */
jQuery( '.menu a' ).on( 'click', function( event ) {
event.preventDefault();
var countryID = jQuery( this ).attr( 'title' ); // <-- !!!
location.href = location.href.split( '#' )[0] + '#' + countryID;
location.reload();
} );
or
/* using plain JS */
var countryAnchors = document.querySelectorAll( '.menu a' );
for( var anchor in countryAnchors ) {
anchor.addEventListener( 'click', function( event ) {
event.preventDefault();
var countryID = this.getAttribute( 'title' ); // <-- !!!
location.href = location.href.split( '#' )[0] + '#' + countryID;
location.reload();
}, false );
}
/* todo: cross-browser test for compatibility on querySelectorAll() and addEventListener() */

It just simple like this:
function cselect(){
var countryID = $(this).attr("title");
window.location.hash = countryID
location.reload();
}

Jquery codes does not work on external loaded html file

I have index.php and will load index-edit.php with a button click into index.php in a <div class="edit-wrapper"> </div>. I have some input in index.php and some input in index-edit.php. I want to add .active class to them on focus out, but jQuery does not add .active class to the ones in index-edit.php, but rest of them (which are not index-edit.php) works fine.
Look at my script.js.
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});

Since the inputs are added dynamically, you need to use event delegation to register the event handler
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('focusout', 'input', function(event) {
$(this).addClass('active');
});

Where are you loading script.js ? Try this :
$(document).ready(function(){
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
});

need to use event delegation
$( document).on('focusout', 'input ', function() {
$( this ).addClass('active');
});

JQuery dynamically added javascripts tags close button

I'm using javascript to dynamically add new tabs in jquery. I use the following code:
$("#mytabs1").tabs("add","list.action","New Tab");
My question is how i can add the close button (x button) to those dynamically added tabs?

There is actually an example to achieve this on the jQuery ui tabs demo pages.
Use the tabTemplate property:
HTML template from which a new tab is created and added. The
placeholders #{href} and #{label} are replaced with the url and tab
label that are passed as arguments to the add method
Here's the code from the site:
var $tabs = $( "#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function( event, ui ) {
var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
$( ui.panel ).append( "<p>" + tab_content + "</p>" );
}
});
// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
});
In your implementation, you should not use .live() but delegate() or on(). Something like:
$('#tabs').on('click', 'span.ui-icon-close', function() {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
});

Tabs do not inherently have an x button. If you are adding an x button to your tabs somewhere else, and would like this same x button added to new tabs you add, you could try using the tabsadd event:
$("#mytabs1").tabs({
add: function(event, ui) {
//your code that adds the custom x button to the new tab here
}
});

If you want to select immediately new added tab:
var $tabs = $('#tabsid').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});
this will not work..