Develop Reference

on() doesn't recognize a class [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I am facing a problem with on(). Here is my code:
<span class="add" id="id_foo" >add this stuff</span>
$(".add").on('click', function() {
$.post("/toto.com/add.php", { trainning: this.id }, function() {});
$(this).html("Remove this stuff");
$(this).removeClass("add").addClass("remove");
//alert($(this).attr("class"));-->give the good class
});
$(".remove").on('click', function() {
//doesn't work
$.post("/toto.com/remove.php", { trainning: this.id }, function() {});
$(this).html("add this stuff");
$(this).removeClass("remove").addClass("add");
});
The selector for the class remove doesn't recognize it whereas when I click on the button with the add class, the class is changing. Do you know what the problem is?
Thank you for your help!

You need to use delegated event handlers as you're dynamically changing the classes the handlers are attached to. Try this:
$(document).on('click', ".add", function() {
$.post("/toto.com/add.php", { trainning: this.id });
$(this).html("Remove this stuff").toggleClass("add remove");
});
$(document).on('click', ".remove", function() {
$.post("/toto.com/remove.php", { trainning: this.id });
$(this).html("add this stuff").toggleClass("remove add");
});
Depending on the location of the script tag this JS code is in you may also need to wrap your code in a document.ready handler. If it's just before the </body> tag it will work fine, if it's in the head, place it inside $(function() { /* your code here */ });

Jquery appended item click function not working [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
Ok so I have a button that when someone clicks it appends some info to a section.
like so:
function() {
$(".blend-tile").click(function() {
$(this).hide();
var li = $('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="infora"></div><div class="percent-mix"></div><div class="mix-value"></div></div></div><div class="clear-tile">X</div></li>');
$('#mixers').append(li);
$('.tpic', this).clone(true, true).contents().appendTo(li.find('.color-img'));
$('.infora', this).clone(true, true).contents().appendTo(li.find('.infora'));
if ($('#mixers li').length === 6) {
$(".tiles").hide();
$(".nomore").show();
}
});
});
Which is all good work's fine.
But I also want all of this to remove() when I click <div class="clear-tile">X</div>.
and for that I am using:
$(function() {
$(".clear-tile").click(function() {
$(this).parent().remove();
});
});
But nothing happens no error nothing.
I also have similar function's in my file that use remove() and such which work fine. It's just anything that I try to trigger from .clear-tile just doesn't work at all.
I have a feeling it's down to me appending it but I'm not sure any help would be much appreciated

You need to use event delegation:
$("#mixers").on("click", ".clear-tile", function() {
$(this).parent().remove();
});
Instead:
$(".clear-tile").click(function() {
$(this).parent().remove();
});

Avoid jQuery click function on <a href=""> elements [duplicate]

This question already has answers here:
disable a hyperlink using jQuery
(11 answers)
Closed 8 years ago.
I do have the following click function on a div element. Inside the div element are links. How can I stop the click function on this links? I tried z-index but it doesn't work.
$('.thumb.flip').click(function () {
if ($(this).find('.thumb-wrapper').hasClass('flipIt')) {
$(this).find('.thumb-wrapper').removeClass('flipIt');
} else {
$(this).find('.thumb-wrapper').addClass('flipIt');
}
});

Add code to stop the click from propagating from the links up the DOM to the div:
$('a').click(function(e){e.stopPropagation();})
See http://api.jquery.com/event.stoppropagation/
jsFiddle example

Try e.preventDefault()
$('.thumb.flip').click(function (e) {
e.preventDefault();
if ($(this).find('.thumb-wrapper').hasClass('flipIt')) {
$(this).find('.thumb-wrapper').removeClass('flipIt');
} else {
$(this).find('.thumb-wrapper').addClass('flipIt');
}
});

Capture the event object:
$('.thumb.flip').click(function (evt) {
Test to see what sort of element was clicked:
if (evt.target.tagName.toLowerCase() === "a") {
return true;
}

Use the mouse down event and in your handler call event.stopPropagation() and event.preventDefault();

if click target is an a just return false else do normal stuff...
$('.thumb.flip').click(function (e) {
if ($(e.target).is('a')) {
return false;
}
});
z-index won't do anything, however if you want to prevent clicks from css you can add pointer-events property to links and set the value none. That will disable all kind of events on links.

$('.thumb.flip').click(function (e) {
if (e.target.nodeName==="A") { //if target is an anchor, ignore
return;
}
$(this).find('.thumb-wrapper').toggleClass('flipIt') //toggle class
});

If you can edit markup do this:
<a href="javascript:void(0);" ></a>

html div onclick event

I have one html div on my jsp page, on that i have put one anchor tag, please find code below for that,
<div class="expandable-panel-heading">
<h2>
<a id="ancherComplaint" href="#addComplaint"
onclick="markActiveLink(this);">ABC</a>
</h2>
</div>
js code
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
function markActiveLink(el) {
alert($(el).attr("id"));
}
here I when I click on div I got alert with 123 message, its fine but when I click on ABC I want message I want to call markActiveLink method.
JSFiddle
what is wrong with my code? please help me out.

The problem was that clicking the anchor still triggered a click in your <div>. That's called "event bubbling".
In fact, there are multiple solutions:
Checking in the DIV click event handler whether the actual target element was the anchor
→ jsFiddle
$('.expandable-panel-heading').click(function (evt) {
if (evt.target.tagName != "A") {
alert('123');
}
// Also possible if conditions:
// - evt.target.id != "ancherComplaint"
// - !$(evt.target).is("#ancherComplaint")
});
$("#ancherComplaint").click(function () {
alert($(this).attr("id"));
});
Stopping the event propagation from the anchor click listener
→ jsFiddle
$("#ancherComplaint").click(function (evt) {
evt.stopPropagation();
alert($(this).attr("id"));
});
As you may have noticed, I have removed the following selector part from my examples:
:not(#ancherComplaint)
This was unnecessary because there is no element with the class .expandable-panel-heading which also have #ancherComplaint as its ID.
I assume that you wanted to suppress the event for the anchor. That cannot work in that manner because both selectors (yours and mine) select the exact same DIV. The selector has no influence on the listener when it is called; it only sets the list of elements to which the listeners should be registered. Since this list is the same in both versions, there exists no difference.

Try this
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
$('#ancherComplaint').click(function (event) {
alert($(this).attr("id"));
event.stopPropagation()
})
DEMO

Try following :
$('.expandable-panel-heading').click(function (e) {
if(e.target.nodeName == 'A'){
markActiveLink(e.target)
return;
}else{
alert('123');
}
});
function markActiveLink(el) {
alert($(el).attr("id"));
}
Here is the working demo : http://jsfiddle.net/JVrNc/4/

Change your jQuery code with this. It will alert the id of the a.
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
markActiveLink();
alert('123');
});
function markActiveLink(el) {
var el = $('a').attr("id")
alert(el);
}
Demo

You need to read up on event bubbling and for sure remove inline event handling if you have jQuery anyway
Test the click on the div and examine the target
Live Demo
$(".expandable-panel-heading").on("click",function (e) {
if (e.target.id =="ancherComplaint") { // or test the tag
e.preventDefault(); // or e.stopPropagation()
markActiveLink(e.target);
}
else alert('123');
});
function markActiveLink(el) {
alert(el.id);
}

I would have used stopPropagation like this:
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
$('#ancherComplaint').on('click',function(e){
e.stopPropagation();
alert('hiiiiiiiiii');
});

Try out this example, the onclick is still called from your HTML, and event bubbling is stopped.
<div class="expandable-panel-heading">
<h2>
<a id="ancherComplaint" href="#addComplaint" onclick="markActiveLink(this);event.stopPropagation();">ABC</a>
</h2>
</div>
http://jsfiddle.net/NXML7/1/

put your jquery function inside ready function for call click event:
$(document).ready(function() {
$("#ancherComplaint").click(function () {
alert($(this).attr("id"));
});
});

when click on div alert key
$(document).delegate(".searchbtn", "click", function() {
var key=$.trim($('#txtkey').val());
alert(key);
});

onClickOut (click after leaving the element) [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 years ago.
The problem was that I need a "onClickOut"-Event.
For example:
You have a DIV viewing on hovering (onMouseOver) some Button or what ever.
If you click outside the element it needs to hide, but if you say $("body").click it also will be hidden when you click into the element itself. :/
Now I listen the mouseposition and when mouseleave() I set a var on clicking into my element. In the next step I listen a generelly click-event (body) but I ask if the var was set. If not it has to be a click outside my element, so I can hide my element.
I hope you can use it:
$("#schnellsuche_box").mouseleave(function() {
var inside;
$("#schnellsuche_box").click(function() {
inside = true;
});
$("body").click(function() {
if(!inside) {
$("#schnellsuche_box").hide();
}
});
delete inside;
});

You do that by listening to a click on the document level, and inside the event handler you check if the clicked element was #schnellsuche_box or any element inside #schnellsuche_box by using closest(), like so :
$(document).on('click', function(e) {
if ( ! $(e.target).closest('#schnellsuche_box').length )
$('#schnellsuche_box').hide();
});
FIDDLE

You need to stop the #schnellsuche_box click event from bubbling up to the body click event (that's default event propagation) by doing return false:
$("#schnellsuche_box").click(function() {
inside = true;
return false;
});

Try this:
$("body").click(function(e) {
var $target = $(e.target);
if (!$target.is('#schnellsuche_box') &&
!$target.parents('#schnellsuche_box').length) {
alert('outside');
}
});

$("#schnellsuche_box").on("click",function(event) {
event.preventDefault();
event.stopPropagation();
});