This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How can I stop an onclick event from firing for parent element when child is clicked?
I have a div with an onClick event but I don't want it to run when I click a link inside the div.
How can I stop the onClick effecting links inside the element?
<div onclick="dosomething();">
go somewhere but don't dosomething();
</div>
If you could use jQuery then,
$(document).ready(function() {
$("#yourDivId a").click(function(e) {
e.preventDefault();
});
});
//OR without jQuery
document.getElementById("yourAnchorId").onclick = function(evt) {
evt.stopPropagation();
//for IE window.event.cancelBubble = true
}
Hope it helps
$("div#some_id_or_class a").click(function(e) { e.stopPropagation(); })
Don't know how without jQuery. You would have to look for how to stop the propagation of the event in javascript.
Related
This question already has answers here:
jquery stop child triggering parent event
(7 answers)
How do I prevent a parent's onclick event from firing when a child anchor is clicked?
(25 answers)
Prevent click from child firing parent click event
(4 answers)
Closed 5 years ago.
Click on "child" also make the alert work.
But what's the simple way to make click don't work on child elements?
Here is an example: https://fiddle.jshell.net/k8t5dpg2/
Html
<div id="secondary"> 1
<a>child</a>
</div>
Jquery
$('#secondary').click(function () {
alert('something')
});
Add an id to the child and :
$("#child").click(function () {
return false;
});
Use event.target to determine what is being clicked.
Example:
$('#secondary').click(function (event) {
var target = $(event.target);
if (target.is(this)) {
alert('something');
}
});
You can try this.
$('#secondary').click(function (event) {
if(event.target.nodeName ==='A') {
return false;
}else{
alert('something');
}
});
This question already has answers here:
How do I prevent a parent's onclick event from firing when a child anchor is clicked?
(25 answers)
Closed 6 years ago.
I have a situation in which I am creating dynamic content from my database. In which I am creating <div> with content in it. And I have added onclick event that <div>. If user click on the content of the div which means on <div> it opens a popup window. But if there is a anchor tag in the content. At that time if user clicks on anchor tag, Both the event executes it also opens the link page and popup.
I want to prevent that div onclick when anchor tag is clicked.
Is there any this that can help me?
if you use jQuery, try stopPropagation() function like this :
simple example :
$("div a").click(function(e) {
e.stopPropagation();
// your code here...
});
Or enhanced example with classes and IDs :
html :
<div id="content">
...
my link
...
</div>
js:
$("div#content a.noPropagation").click(function(e) {
e.stopPropagation();
// your code here...
});
here is documentation : https://api.jquery.com/event.stoppropagation/
Since you're adding the <div> dynamically, you can bind a click event handler to the closest ancestor to the dynamic content. Here's one way to do it:
$('.some-container').on('click', 'div.dynamic-content a', function(event) {
event.stopPropagation();
});
Here is an example https://jsfiddle.net/7c51j7av/
<div class="outer">
<div class="inner">
click me
</div>
</div>
$(".outer").click(function(){
alert("Here");
});
$(".inner").click(function(e){
e.stopPropagation();
alert("Stopped it");
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have the following javascript code:
$(function (){
$('a.folder').click(function() {
// code goes here ...
}
});
And the following html code:
<a class="folder" href="GetFilesAndFolders?rootFolder=Exigences">Etudes de cas</a>
Whenever I click on the link, the javascript code is never reached. I must say that this html code is generated dynamically after the page loaded. Is this the reason? Any workaround?
when you attach the click handler it's possible that your anchor doesn't exist, try using this:
$(function (){
$(document.body).on('click', 'a.folder', function() {
// code goes here ...
});
});
using this event delegation the click event will fire even if your anchor created dynamically after this code.
$(document).ready(function() {
$("body").on("click", "a.folder", function(e) {
e.preventDefault();
alert('a .folder was clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="folder" href="GetFilesAndFolders?rootFolder=Exigences">Etudes de cas</a>
This question already has answers here:
jquery .click overriding anchor href when i dont want it to!
(4 answers)
Closed 8 years ago.
When setting up a div with a class, attaching a click event to that class using jQuery, it prevents any child href from working.
For example:
HTML
<div class="someClass">
some text here
and a link
</div>
JS
$('body').on('click', '.someClass', function(e) {
alert("clicked");
});
jsfiddle for this: http://jsfiddle.net/w6ero5j5/2/
it will always alert the message, even when clicking on the link.
how can I make the link works?
I dont know why do you want this. But, it happen when you put alert function.
Then If you execute this, there is not problem. code here
$('.someClass').on('click', function(){
var $this = $(this);
if ( $this.hasClass("ok") ) {
$this.removeClass("ok");
} else {
$this.addClass("ok");
}
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I have a simple example
<div id="test">add more text</div>
When you click on this text
jQuery('#test').on('click', function (event) {
$('body').append("<div id='newtest'>new test</div>");
});
you get some more text appear.
After I have clicked on 'add more text' my page looks like this
<div id="test">add more text</div>
<div id="newtest">new test</div>
I am wondering what I need to do to interact with the newtest div?
If I put the below in.
jQuery('#newtest').on('click', function (event) {
alert('not working?');
});
Nothing happens.
How do I interact with content that gets added after load? I thought .on helped me do this?
The reason why you need to use $(document).on() instead of $('#newtest').on() is because #newtest is a new element that you have injected into the DOM.
You must now use .on() ) against an higher element that was originally in the DOM, in order to attach an event handler to the newly injected element.
Thus:
jQuery(document).on('click', '#newtest', function (event) {
alert('This will work now');
});
You need to apply your click handler to the document.
jQuery(document).on('click', '#newtest', function (event) {
alert('not working?');
});
Hope this helps! :)
put the event on your document instead of an element
jQuery(document).on('click', '#newtest', function (event) {
alert('not working?');
});
Set the .on() event to a parent element, such as the body and delegate it to the newtest div.
jQuery('body').on('click', '#newtest', function (event) {
alert('Working!');
});