This question already has answers here:
Ignore table click function when clicking on a link
(2 answers)
Closed 8 years ago.
I have a table in which I have the following event:
$("#tp-active-list-table td").click(function () {
var transactionNbr = parseInt($(this).parent("tr").children('td.td-transaction-nbr').html());
DoSomething(transactionNbr);
});
It works fine and basically it calls the DoSomething with the Number gathered from the respective td.
But I do have a problem, since in one of the tds I have an anchor, and if the click is performed on that anchor, then the DoSomething will run, and the page will correctly navigate to another URL.
Is there anyway to check if the click was on that anchor to avoid running the DoSomething function?
Use event.stopPropagation() to prevent bubbling of events.
$('td a').click(function (e) {
e.stopPropagation()
});
Other option would be : e.target.tagName
$("#tp-active-list-table td").click(function (e) {
if(e.target.tagName.toLowerCase() === 'a'){
var transactionNbr = parseInt($(this).parent("tr").children('td.td-transaction-nbr').html());
DoSomething(transactionNbr);
}
});
the object that is passed to your handler function as the first argument has property target if target.tagName == 'a' then you clicked on an anchor.
I think Shaunak's answer very effective. Just to point out another approach, on the click event you can check if there's an hovered a tag. http://jsfiddle.net/Zx7S5/
$("#tp-active-list-table td").click(function(event) {
if($(this).find("a:hover").length <= 0) {
/* ..... */
}
});
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:
Event binding on dynamically created elements?
(23 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
I have the following code:
if(amStatus === "Logout") {
$('#row-qfauto-1 .large-9').append('<a id="next-password" class="button button-next" href="javascript:;">Next</a>')
$('#next-password').click(function() {
$('#row-html2-0').addClass('next-visible')
$(window).resize()
})
}
$('.button-next').on('click', function() {
$(this).hide()
$(window).resize()
})
As you can see button-next is being added dynamically with jQuery. So in order to make the button disappear when clicked I decided to use on.
However, the button doesn't disappear. It just stays there. When I do
$('.button-next').click(function() {
$(this).hide()
$(window).resize()
})
twice in the console, then the button disappears. Weird. What could be the problem?
Live site: http://www.chineselearnonline.com/amember/signup/cloprogressive
Try this:
if (amStatus === "Logout") {
$('#row-qfauto-1 .large-9').append('<a id="next-password" class="button button-next" href="javascript:;">Next</a>')
$('#next-password').click(function() {
$('#row-html2-0').addClass('next-visible')
$(window).resize()
})
}
$('#row-qfauto-1 .large-9').on('click', '.button-next', function(e) {
e.preventDefault();
$(this).hide()
$(window).resize()
});
Note: You are assigning event listener to #next-password as well as .button-next, is this the way you want to implement ?
Also make sure you dont have redundant id in your DOM
Try event delegation
$(document).on("click", ".button-next", function() {
// do stuff
})
or attaching click event when element created using jQuery()
$("#row-qfauto-1 .large-9")
.append($("<a></a>", {
"id":"next-password",
"class":"button button-next",
"href":"javascript:;"
"on": {
"click": function() {
$(this).hide()
$(window).resize()
}
},
"html":"Next"
}))
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");
}
});
How can I trigger a function when I click anywhere on my page except on one div (id=menu_content) ?
You can apply click on body of document and cancel click processing if the click event is generated by div with id menu_content, This will bind event to single element and saving binding of click with every element except menu_content
$('body').click(function(evt){
if(evt.target.id == "menu_content")
return;
//For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
if($(evt.target).closest('#menu_content').length)
return;
//Do processing of click event here for every element except with id menu_content
});
See the documentation for jQuery Event Target. Using the target property of the event object, you can detect where the click originated within the #menu_content element and, if so, terminate the click handler early. You will have to use .closest() to handle cases where the click originated in a descendant of #menu_content.
$(document).click(function(e){
// Check if click was triggered on or within #menu_content
if( $(e.target).closest("#menu_content").length > 0 ) {
return false;
}
// Otherwise
// trigger your click function
});
try this
$('html').click(function() {
//your stuf
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
you can also use the outside events
I know that this question has been answered, And all the answers are nice.
But I wanted to add my two cents to this question for people who have similar (but not exactly the same) problem.
In a more general way, we can do something like this:
$('body').click(function(evt){
if(!$(evt.target).is('#menu_content')) {
//event handling code
}
});
This way we can handle not only events fired by anything except element with id menu_content but also events that are fired by anything except any element that we can select using CSS selectors.
For instance in the following code snippet I am getting events fired by any element except all <li> elements which are descendants of div element with id myNavbar.
$('body').click(function(evt){
if(!$(evt.target).is('div#myNavbar li')) {
//event handling code
}
});
here is what i did. wanted to make sure i could click any of the children in my datepicker without closing it.
$('html').click(function(e){
if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
// clicked menu content or children
} else {
// didnt click menu content
}
});
my actual code:
$('html').click(function(e){
if (e.target.id != 'datepicker'
&& $(e.target).parents('#datepicker').length == 0
&& !$(e.target).hasClass('datepicker')
) {
$('#datepicker').remove();
}
});
You could try this:
$(":not(#menu_content)").on("click", function(e) {
e.stopPropagation();
// Run your function when clicked anywhere except #menu_content
// Use with caution, 'cause it will prevent clicking on other elements
});
$("#menu_content").on("click", function(e) {
e.stopPropagation();
// Run when clicked on #menu_content
});
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.