<script>
$(".alert").click(function(){
$(this).fadeOut(300, function(){
$(this).remove();
});
});
</script>
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
So the above code works perfectly except that I need to make it so that a user can select the text inside the textarea. At this moment logically when they click the textarea, as its contained by .alert, it instantly gets removed with the div.
I can't remove the textarea from the div as I need it both contained by the div, and removed when other parts of the div are clicked.
So how can I specifically exclude the textarea from the click event of its containing div while still allowing the click event from the containing div to remove the textarea.
You can do this by preventing the click event from propagating (bubbling) from the textarea to the div:
$(".alert textarea").on("click", function(e) {
e.stopPropgation();
});
Example:
$(".alert").click(function(){
$(this).fadeOut(300, function(){
$(this).remove();
});
});
$(".alert textarea").on("click", function(e) {
e.stopPropagation();
});
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Alternately, in your existing handler, check to see if the event passed through the textarea:
$(".alert").click(function(e){
if (!$(e.target).closest("textarea").length) {
$(this).fadeOut(300, function(){
$(this).remove();
});
}
});
Example:
$(".alert").click(function(e){
if (!$(e.target).closest("textarea").length) {
$(this).fadeOut(300, function(){
$(this).remove();
});
}
});
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note that that second one relies on the fact that your .alert element can never be inside another textarea, because of the nature of the elements. It won't work in the general case. This would, but it's a pain:
$(".alert").click(function(e){
var $t = $(e.target);
if (!$t.is("textarea") && !$t.parentsUntil(this, "textarea").length) {
$(this).fadeOut(300, function(){
$(this).remove();
});
}
});
you can also use the not selector to do this :
<script>
$(".alert *:not(textarea)").click(function(){
$(this).fadeOut(300, function(){
$(this).parent().remove();
});
});
</script>
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
see this fiddle: https://jsfiddle.net/zLq6dztu/
Related
In my code, I have added onclick on parent div and want to perform other action on inner div, but clicking on inner div also triggering parent click.
how to stop that?
$(document).on('click', '.child', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('child');
});
function parentfun(sender) {
console.log('parent');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" onclick="parentfun(this)">
parent
<div class="child">child</div>
</div>
Above divs are generated on run time on some other event.
Clicking on child, also trigger parent's click. preventDefault & stopPropagation are not working.
FYI: my question is different than How do I prevent a parent's onclick event from firing when a child anchor is clicked?
What you are actually doing here is binding the click-event to the document, not the child-element. So the event has already bubbled up all the way to the document, it's too late to try to stop the bubbling with stopPropagation.
See here when I change the click-handler to the child instead:
$(".child").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('child');
});
function parentfun(sender) {
console.log('parent');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" onclick="parentfun(this)">
parent
<div class="child">child</div>
</div>
Edit
As the question changed a bit, here is what you can do (for example) if the elements are created dynamically:
$(document).on('click', '.parent, .child', function(e) {
e.stopPropagation();
if ($(this).is(".child")) {
console.log('child');
} else {
console.log('parent');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
parent
<div class="child">child</div>
</div>
Using plain vanilla JS it works as expected:
function logEventTarget(e) {
e.stopPropagation();
console.log(e.target.id);
}
parentDiv.addEventListener('click', logEventTarget)
childDiv.addEventListener('click', logEventTarget)
<div id="parentDiv">
parent
<div id="childDiv">child</div>
</div>
Using an inline event handler won't pass the event to the handler function:
function logEventTarget(e) {
e.stopPropagation();
console.log(e.target.id);
}
childDiv.addEventListener('click', logEventTarget)
<div id="parentDiv" onclick="logEventTarget()">
parent
<div id="childDiv">child</div>
</div>
One of the many reasons you shouldn't use inline event handlers at all. Note that e.stopPropagation() still works for the childDiv.
You can notice that when clicking the chlid element the parent triggers first (that is why parent prints first then child ) because of event capturing which precedes event bubbling. In-order to stop the event capturing phase from parent you can stop propagating that event and then only child event will trigger.
$(document).on('click', '.child', function(e) {
//e.preventDefault();
e.stopPropagation();
console.log('child');
});
$(document).on('click', '.parent', parentfun);
function parentfun(e) {
e.stopPropagation();
console.log('parent');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
parent
<div class="child">child</div>
</div>
You can also resolve this problem by editing little bit in Your html code
<div class="parent" id="parent-div">
<!-- Just adding parent div text inside span tag -->
<span>parent</span>
<div class="child">child</div>
</div>
now go to jquery code
$('.parent span').on('click',function(){
//only print child text u can do more
alert($('.child').text());
//Change color of child
$('.child').css('color','red');
});
I have a div that gets added to dynamically and I would like to have a mouseenter event for images that have been dynamically added in another tag. The div that is getting added to looks like this before hand:
<div class="chat_box">
</div>
and looks like this after content has been added:
<div class="chat_box">
<p class="chat">text here <img class="emote" src="emote.png"> more text</p>
</div>
I would like to have a mouseenter event for the image with the class of emote, but I cannot get it to work.
I have tried the following:
$('.chat_box').on('mouseenter', '.chat', function(){
alert();
});
and it works, but if I try to use the child selector
$('.chat_box').on('mouseenter', '.chat > .emote', function(){
alert();
});
and
$('.chat_box').on('mouseenter', '.chat > img', function(){
alert();
});
it doesn't work.
This was previously provided by .live(), but that function has been merged into .on() ... it creates an event watcher.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="chat_box"></div>
<button>Add</button>
<script>
$('button').click(function(){
$('<div class="chat"><img width=10 height=10 class="emote"></div>').appendTo('.chat_box');
});
$('.chat_box').on('mouseenter', 'img.emote', function(){ alert('test'); });
</script>
Just target the parent object and have it watch for the expected child.
I have an html as below :
<div class="parent">
parent
<div class="child">child</div>
</div>
Here is my Jquery binding an click event :
$(document).ready(function(){
$('.parent').on('click', function(){
alert('parent div');
});
$('.child').on('click', function(){
alert('child div');
});
});
I want, if I click on ".child" div, then event bound on "div.parent" should not be called.
Again if I click on ".parent" div and its bound event should be executed.
I have tried with following -
$('.child').on('click', function(){
alert('child div');
$(this).parents('.parent').off('click');
return false;
});
But above code has unbound the "click" event on parent div permanently,
and again its click event does not trigger.
why don't you stop propagating to prevent bubbling up the event from child to achieve this
$(document).ready(function(){
$('.parent').on('click', function(){
alert('parent div');
});
$('.child').on('click', function(ev){
ev.stopPropagation();
alert('child div');
});
});
Once you click on the child div, the event bubbles up through the DOM tree, which causes the parent div to be triggered, now to prevent this you need to stop propagation using event.stopPropagation() read more on it here
$('.child').on('click', function(event){
event.stopPropagation();
alert('child div');
return false;
});
Gautam,
Interesting problem. I was thinking subclasses. But since you have the div elements wrapped in each other, this is not feasible. Therefore, I recommend the following functions that will toggle the response until the next time it is clicked.
makeParentReady = function() {
$('.parent').on('click', function(){
myClass=this.className;
alert('parent div');
});
}
$(document).ready(function(){
makeParentReady();
$('.child').on('click', function(){
myClass=this.className;
alert('child div');
$(this).parents('.parent').off('click');
makeParentReady();
return false;
});
});
Yes. Dhiraj is right. use topPropagation() function
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('.parent').on('click', function(){
alert('parent div');
$('.child').click();
});
$('.child').on('click', function(e){
e.stopPropagation()
alert('child div');
});
});
</script>
</head>
<body>
<div class="parent">
parent
<div class="child">child</div>
</div>
</body>
</html>
<script>
$(".image-popup").on('click', function() {
$(this).find(".myModal").addClass("modal-active");
$(".modal-active").css("display", "block");
});
$(".close").on('click', function() {
$(".modal-active").css("display", "none");
var myVar = $(this).closest(".image-popup");
myVar.find(".myModal").removeClass("modal-active");
$(".modal-active").css("display","none");
});
</script>
I am attempting to have a modal appear and then disappear when I click the close button. The problem is that the removeClass() will not work and the "display", "none" will not override the first click function. Any Help?
My guess from your question and your comment above is that the event from your second handler is bubbling up to your first handler:
$(".image-popup").on('click', function() {
$(this).find(".myModal")
.addClass("modal-active")
.show();
});
$(".close").on('click', function(evt) {
evt.preventDefault();
$(this).closest(".image-popup")
.find(".myModal")
.removeClass("modal-active");
.hide();
});
Try to prevent the event from bubbling out of the .close handler by using evt.preventDefault();
You can fix it with this simple solution:
HTML
<div class="image-popup">
<div class="show-modal btn btn-success">Show Modal</div>
<div class="myModal">
<div class="close btn btn-success">Close</div>
<p>My Modal is active</p>
</div>
</div>
CSS
.modal-active .myModal{
display: block;
}
.myModal{
display:none;
}
.close{
color:red;
display:block;
}
JS
$(function(){
$('.show-modal').click(function(){
$(this).parent().addClass('modal-active');
});
$('.close').click(function(){
$(this).closest('.image-popup').removeClass('modal-active');
});
});
See this fiddle for more details https://jsfiddle.net/a3yze54w/1/
I have several elements on a page like bottom code.
<div>
click
some content
</div>
They can be clicked and jQuery picks that click. However one of the elements has a a link that is clicked should not be picked as a click of the parent element.
$('div:not(#notme)').on('click', function(e) {
// do something
});
Doesn't seem to work for some reason...
Use :has selector to selecting div element has specific child. In :has use :not.
$("div:has(a:not(#notme))").on("click", function(e) {
console.log("clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click
some content
</div>
<div>
<a href="#" >click2</a>
some content 2
</div>
You may try:
$('div').on('click', function(e) {
if($(e.target).attr("id") !== "notme") {
// do something
}
});
$('#notme').on('click', function(e) {
e.stopPropagation();
});