how to add click event for newly appended div in jquery? - javascript

this is my html
<div id="main">
<div class="submit">welcome</div>
</div>
this is my jquery
$(".submit").click(function()
{
$("$main").append('<div class="submit">welcome</div>');
});
here what happen this is working for first div .This event is not working for newly added div ?
how to solve this ?

You've two options, delegation (assigning the click-handler to be detected by the parent):
$('#main').on('click', 'div.submit', function(){
// this is your click-handler
});
Or by binding the click-handler at the point of element-creation:
$(".submit").click(function() {
$('<div />', {
'class' : 'submit',
'on' : {
'click' : function(){
// this is your click-handler
}
}).appendTo('#main');
});
Obviously, if you have a named-function to call you can assign that instead of using the anonymous function:
$('#main').on('click', 'div.submit', namedFunctionToCall);
Or:
$(".submit").click(function() {
$('<div />', {
'class' : 'submit',
'click' : namedFunctionToCall
}).appendTo('#main');
});
References:
Creating elements, with jQuery.
on().

Use delegation:
$("#main").on("click", ".submit", function()
{
$("#main").append('<div class="submit">welcome</div>');
});
And replace the $ with # when selecting #main.

Use event delegation
$("#main").on('click', '.submit', function () {
$("#main").append('<div class="submit">welcome</div>');
});
Demo: Fiddle

You need to define # if your using div id like
$("#main").append();
In case if your using class it can be access by . like that
$(".main").append();

Try this
$(function(){
$('.submit').bind('click', function (event) {
alert("Hello");
});
});

You can use live Function
$( ".submit" ).live( "click", function() {
alert("Appended" ); // jQuery 1.3+
});

Related

jQuery hover event is not recognized

The below code works -
$("#x").hover(function() {
alert("hovered");
});
But the below code does not. Please explain why?
$("#x").on("hover", function() {
alert("hovered");
});
Note - #x is a button element. and the above code works for "click" event
From jQuery .on()'s documentation:
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
You could pass an object to the on method:
$("#x").on({
mouseenter: function() {
// ...
},
mouseleave: function() {
// ...
}
});
And if you want to delegate the events:
$('#aStaticParentOfX').on({
mouseenter: function() {
// ...
},
mouseleave: function() {
// ...
}
}, "#x");
Even the .live() has depricated from jQuery 1.9 if your version is below 1.9 you can use
$("#x").live("hover", function() {
alert("hovered");
});
First: jQuery hover need 2 functions as arguments More here: http://api.jquery.com/hover/
$('#x').hover(
function() {
// your 'mouseenter' event handle
}, function() {
// your 'mouseleave' event handle
});
Second: you can simply use CSS hover pseudo-class if your code operate on the same element (#x)
#x:hover {
// this will be added to #x when 'mouseenter', and remove when 'mouseleave'
background-color: red;
}
try this..
$("#x").on("mouseover", function () {
//wrire your code here
});
if you populated elements through javascript,use the following. It is replacement for deprecated jQuery.live.
$("body").on("mouseover","#x", function () {
//wrire your code here
});
see this js fiddle http://jsfiddle.net/3aq48p5m/3/

jquery .on click not working with later added elements

I have the following issue. As far as I know, using .on function should add event listeners to selected elements even though they might not exists at the present time. I am replacing elements on my page and after they are replaced, event listeners are not attached to them.
So where did I make mistake?
Here is the code which is not working:
html:
<nav>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</nav>
<button>change</button>
javascript:
$(function() {
$("ul li").on("click", function() {
$(this).css({"color": "red"});
});
$("button").on("click", function() {
$("ul li").css({"color": "black"});
var html = $("nav").html();
$("nav").html(html);
});
});
fiddle: http://jsfiddle.net/Q48db/
Just using .on() will not make an event handler to work on dynamic elements, you need to use the event delegation format of on()
The format for event delegation is
$(static-ancestor).on(event, dynamic-element-selector, handler)
So
$("nav").on("click", 'li', function () {
$(this).css({
"color": "red"
});
});
Demo: Fiddle
In your case the nav element is the static element because you are changing the its content so you can bind the handler to it and since you want to have the click handler for the li elements pass li as the dynamic element selector
You need to use event delegation for dynamically added element:
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all children matching a selector,
whether those children exist now or are added in the future.
$(function () {
$("nav").on("click", 'li', function () {
$(this).css({
"color": "red"
});
});
$("button").on("click", function () {
$("ul li").css({
"color": "black"
});
var html = $("nav").html();
$("nav").html(html);
});
});
Updated Fiddle
Use event Delegation method:
$(function() {
$("ul li").on("click", function() {
$(this).css({"color": "red"});
});
$("document").on("click","button", function() {
$("ul li").css({"color": "black"});
var html = $("nav").html();
$("nav").html(html);
});
});
Example to understand event delegation:
// attach a directly bound event
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
// attach a delegated event
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
You need delegate.
$("nav").on("click",'ul li', function() {
$(this).css({"color": "red"});
});
$("button").on("click", function() {
$("ul li").css({"color": "black"});
var html = $("nav").html();
$("nav").html(html);
});
demo fiddle

Attach multiple event handlers with .on() and name spaces syntax

When using .on() in jQuery you can attach multiple event handlers like so:
$("li").on({
click: function(){
$(this).toggleClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
You can also handle events using name spaces, like so:
$( 'li' ).on( 'click.toggles', function() {
$(this).toggleClass("active");
});
$( 'li' ).off( 'click.toggles' );
//click.toggles is the name space?
How do you you combine these two syntax? In hopes to easily turn off a set of multiple event handlers using .off().
Or am I totally not understanding namespaces and this is just wrong.
For on you can write:
$("li").on({
"click.namespace": function(){
$(this).toggleClass("active");
},
"mouseenter.namespace": function(){
$(this).addClass("inside");
},
"mouseleave.namespace": function(){
$(this).removeClass("inside");
}
});
And for off you can write
$("li").off(".namespace");
$("li").off("click.namespace mouseenter.namespace mouseleave.namespace");

Jquery on hover not functioning

I'm changing my codes to be compatible with jQuery 1.8 and I'm stuck with this hover which doesn't work. When I used then same thing with a click it worked. Here is my code, can anyone tell me where I'm going wrong?
$(document).on('hover', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function () {
$(this).find('.dropfcnt').hide('blind', function () {
$('.actionfcnt').hide();
});
});
Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
Source: http://api.jquery.com/on/#additional-notes
That pretty much says it all, you cant use "hover" for that:
$(document).on('mouseenter','.top-level', function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level', function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
there is no "hover" event.
there is .hover() function that takes 2 callbacks (as in your example).
Try:
$(".top-level").on({
mouseenter: function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
},
mouseleave: function (event) {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
OR
$(".top_level").on("hover", function(event) {
if(event.type == "mouseenter") {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}
else if (event.type == "mouseleave") {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
.on function has only 3 parameters : http://api.jquery.com/on/
If you don't need your handlers be bound to dynamically added elements as well, then you may use the good old hover function with 2 event handlers.
$('.top-level').hover(function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});​
By the way, $(selector).hover(handlerIn, handlerOut) is shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.
If you need to, then use on for mouseenter and mouseleave events:
$(document).on('mouseenter', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});​
Try
$('.top-level').hover(function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}, function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});

onClicking on a parent div, get child value- without String manipulation

How can I get the child-input value; from click event on its parent div-
Dynamic HTML
<div class="tableRowOdd">
<input type="hidden" value="28">
04/11/2012
</div>
JS
$('#historyContainer .tableRowOdd').live( 'click', function(e) {
// Here I want to get the hidden-input's value directly
// something like- $(this+'input').val()
console.log( $(this) );
});
Don't want to do string manipulation from $(this).html()
Please help.
$('#historyContainer .tableRowOdd').live( 'click', function(e) {
console.log( $(this).find('input').val() ); // or .text()
});
note that this will iterate through all inputs. if you want just the first:
$('#historyContainer .tableRowOdd').live( 'click', function(e) {
console.log( $(this).find('input').first().val() ); // or .text()
});
that is possible via jQuery:
$('#historyContainer .tableRowOdd').live( 'click', function(e) {
// if you have more inputs and wanna get the hidden
console.log( $(this).find('input[type="hidden"]').val() );
});
$(this).find('input').val() should return you the value.
Note: Use .on incase if you are using jQuery 1.7 or use .delegate for older version. .live is not a preferred function.
Using .delegate for older versions,
$('#historyContainer').delegate('.tableRowOdd', 'click', function(e) {
$(this).find('input').val()
console.log( $(this) );
});
Using .on For jQuery 1.7,
$('#historyContainer').on('click', '.tableRowOdd', function(e) {
$(this).find('input').val()
console.log( $(this) );
});
You could do this;
$(this).find('input').val()

Categories

Resources