jquery .on click not working with later added elements - javascript

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

Related

Jquery combine click and change

Is it possible listen click and change for one code?
$(document).on("click", "button.options_buy",function(event) {
// same code
}
$(document).on("change", "select.options_buy",function(event) {
// same code
}
I try this
$(document).on("click change", "button.options_buy,select.options_buy",function(event) { }
It works but I want 'click' only for 'button.options_buy' and 'change' for 'select.options_buy'
is it possible?
Best way to do it is to have two event handlers as you have, but only have a common function that is called from each:
$(document).on("click", "button.options_buy",function(event) {
commonFunction();
})
$(document).on("change", "select.options_buy",function(event) {
commonFunction();
})
function commonFunction(){
//common function code
}
I would like to extend your code.
$(document).on("click change", "button.options_buy,select.options_buy",function(event) {
if(event.type=="click"){
someFunction();
} else if(event.type=="change"){
someFunction();
}
}
You can use .on() to bind a function to multiple events:
$('#foo').on('keypress click change', function(e) {
//
});
OR declare a function and call it for each event
$('#foo')
.change(myFunction)
.click(myFunction)
.blur(myFunction)
jQuery .bind()
$( "#foo" ).bind({
click: function() {
// Do something on click
},
mouseenter: function() {
// Do something on mouseenter
}
});
OR
$( "#foo" ).bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});

jQuery preblems with click on nested created elements

I created the below html with JavaScript and I want to be able to listen to the click on both the channel_li and client_li.
Generated HTML
<li cid="4" class="channel_li" style="display: list-item;">Random<ul class="client_ul">
<li class="client_li" clid="14" style="">Hanekawa</li></ul>
</li>
The second code snippet is the JavaScript I'm using to generate the elements and assign a click event. The problem I have is that when I click the channel_li nothing happens, and when I click on the client_li it triggers the channel_li listener. Is there anyway of fixing this?
JS
// Some generation code here.
// $li here is the created channel_li element.
$($li).on("click", "li", function() {
console.log("channel click");
});
// More generation code.
// $foo here is the client_li element.
$($foo).on('li', 'click', function () {
console.log("client click.")
});
You will need stopPropagation(): http://api.jquery.com/event.stoppropagation/, because nested elements are in question.
$(document).on("click", "li.channel_li", function() {
alert("channel click");
});
$(document).on("click", "li.client_li", function(e) {
e.stopPropagation();
alert("client click");
});
fiddle: http://jsfiddle.net/W68sa/1/
Your selector is wrong, becoue $li is not a variable or valid selector:
// $li here is the created channel_li element.
$($li).on("click", "li", function() {
console.log("channel click");
});
for
// $li here is the created channel_li element.
$(document).on("click", "li", function() {
console.log("channel click");
});
How you need trigger diferens events use the clase for:
// $li here is the created channel_li element.
$(document).on("click", ".client_li", function() {
console.log("Client click");
});
// $li here is the created channel_li element.
$(document).on("click", ".channel_li", function() {
e.stopPropagation();
console.log("Channel click");
});
Live Demo
Live Demo 2
Description stopPropagation: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of
the event.

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

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

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

Categories

Resources