This question already has answers here:
How to have click event ONLY fire on parent DIV, not children?
(12 answers)
Closed 10 years ago.
I have a div that covers the screen. Within the div is another div and within that, an image get dynamically placed. When the user clicks on the outer div it closes, and that is fine. When the user clicks on the image or the inner div it closes as well, how can I stop that from happening? I only want it to close if they click on the outer div.
This is what I am using; what do I need to do to make this work?
$("#black-out").click(function(){
$(this).fadeOut("slow");
});
The HTML:
<div id="black-out"><div id="image-holder"></div></div>
Check if the clicked element is the same as the one the event was bound to :
$("#black-out").click(function(e){
if (e.target == this) $(this).fadeOut("slow");
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 10 months ago.
I have problem with following code. I have a div with id reloadDiv that is refreshing every 3 seconds using ajax. Content of the div is loaded using php, there is more content in this div but I didn't added it here.
Div is reloading normally. The problem is with input type button event with class replyComment, there are multiple buttons with this class here. When I add click event the event is working until first reload, as soon as div reloads event is not working any more.
Does someone know how to solve this problem?
<div id="reloadDiv">
<?php foreach($comments as $c):?>
<input type="button" value="Reply" class="replyComment" />
<?php endforeach?>
</div>
js:
setInterval(function(){
$("#reloadDiv").load(location.href + " #replyComment");
}, 3000);
$('.replyComment').click(function(){
console.log("smth")
});
That happens because content is replaced, and the element with the event doesn't exists anymore, as well the event.
Try this:
$('#reloadDiv').on('click', '.replyComment', function() {
With that, the event is bound to the parent element and will work no matter how many times the content is recreated.
This question already has answers here:
Stop mouse event propagation
(15 answers)
Closed 5 years ago.
I have a list of elements.
Each element have a global click event and a child icon which should also be clickable.
Example :
<div class="parent-element" (click)="clickParent()">
<span class="button" (click)="childClick()">
</span>
</div>
For now when I click on the span, both click are fired. How can I separate it from the parent click event ?
Catch the event on both methods (parent and child) and call event.preventDefault() or event.stopPropagation()
This question already has answers here:
Detect Click into Iframe using JavaScript
(23 answers)
Closed 7 years ago.
Got a js that appends an iframe with content from other site. I need certain action to be triggered on click within the iframe.
Obviously, i can't use elements inside iframe. I've tried following, and it didn't work.
$('.container iframe').click(function(){
alert('works!");
});
Then I tried this.
$('.container').click(function(){
alert('works!");
});
click on container works, but when click happens within iframe, it doesn't work.
Can someone point me in right direction?
Thank you!
var iframeBody = $('body', $('.container iframe')[0].contentWindow.document);
$(iframeBody).on('click', function(e) {
// your code
});
This question already has answers here:
Prevent page scroll after click?
(3 answers)
Closed 8 years ago.
I'm working with a site that has a fixed navigation bar at the top. The search input field uses jQuery to slide out in nav bar when the icon is clicked. When the user scrolls down on the page and clicks the icon, the page automatically scrolls back to the top. Is there a simple way to prevent this behavior in the event handler below?
$('.search-button').on('click', function(){
$(this).hide();
$('.search-field').animate({'width':'toggle'});
});
$('.search-button').on('click', function(e){
e.preventDefault(); //If this method is called, the default action of the event will not be triggered.
$(this).hide();
$('.search-field').animate({'width':'toggle'}); });
pass the event e as argument and cancel the default behaviour
that will work
This question already has answers here:
Detect click outside element?
(2 answers)
Hide div when clicking outside
(3 answers)
Closed 10 years ago.
I have a webpage with several hidden divs. I have them set up so that when an image is clicked, they will display and if the image is clicked again, they hide. The problem is, I need to hide them if they're visible and any part of the page is clicked. I've searched high and low and have found some suggestions but have yet to find one that works. Can anyone help?
$(window).click(function() {
$('img').hide();
});
Very simple example
I usually bind a document.click event to listen for a click outside and then remove it when the window is closed.
// in function after your image shows up.
document.click = hideImage;
// other code to hide image when image is clicked
// in function after your image is hidden.
document.click = null;
If you're using jQuery it's easier because you can namespace your events for safe add and removal.
// in function after your image shows up.
$(document).bind('click.imagehide', hideImage);
// other code to hide image when image is clicked
// in function after your image is hidden.
$(document).unbind('click.imagehide');
This method is safer so you don't interfere with other click events bound to the document.
What you need to do is prevent event bubbling. If you are using jquery you can do:
$(document).on ('click', function () { $('div').hide (); });
$('img').on ('click', function (e) { e.stopPropagation (); });
Remeber to change the selectors to fit your needs.