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");
}
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have a PHP snippet in a separate file which I am loading in a javascript file using jquery:
let signUpMode = $(".modal");
signUpMode.load("login_signup_popup.php");
This works because I am able to show this on screen. However, this snippet contains a button which I would like to click in the same javascript file where I loaded the snippet. something simple like:
$(".signupbtn").on("click", function(){
console.log("signed Up");
});
This click is, however, not working. signupbtn is a div element in the snippet. Somehow I am missing an extra step since jquery seems to not be recognizing the elements in the snippet.
Lazy loaded elements are not recognized from eventhandlers which are already initialized. So you have to set the event on a parent. This should work:
$(document).on('click', '.signupbtn', function(){
console.log("signed Up");
});
https://api.jquery.com/load/
You could use the complete function to check if it has loaded, or you could just put the button function inside there.
let signUpMode = $(".modal");
signUpMode.load("login_signup_popup.php", function() {
$(".signupbtn").on("click", function() {
console.log("signed Up");
});
});
This question already has answers here:
jQuery disable a link
(18 answers)
Closed 8 years ago.
I know that Link will just do the job,
but what I intend to do is to specify a href, but will not jump to it when being clicked, just like:
Link
When I click on this link, I'd just like the onclick is invoked, whereas href is just a 'show' without jumping to http://mydomain.com.
How could this be done by javascript or css? Thanks a lot!
There are a few ways you can do this. If you must fulfill the answer within the HTML then:
click here
But better practice is to follow Andrew Spartar's solution and separate the JavaScript using a class or other selector.
add class to the link, for example: class="not-jump"
then in jQuery add listener:
$( ".not-jump" ).click(function(e) {
e.preventDefault();
});
That should do the trick.
like this:
Link
JS:
function myFunc(e) {
e.preventDefault();
...
}
and to separate html from js:
Link
JS:
$(".somelink").on('click', function(event) {
event.preventDefault();
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I know that on click is used for dynamically generated elements ... so my AJAX returns data and the link to be clicked on ... but for some reason , nothing happens .. below is my code
// jquery for the click event
$(".back_to_followers").on('click', function(event){
event.preventDefault();
alert('clicked');
$('.user_media_result').empty();
$('.user_media_result').hide();
$('.list_of_followers').show();
});
and the link brought by AJAX
<a class="back_to_followers" style="color:blue; font-size:20px;" href="#"> Back to list of followers </a>
Use this:
$(document).on('click', ".back_to_followers", function(event){
event.preventDefault();
alert('clicked');
$('.user_media_result').empty();
$('.user_media_result').hide();
$('.list_of_followers').show();
});
Your code only works on what is already loaded so you can set an event which targets the entire document or the parent element which contains the .back_to_followers and then defines the element which must be clicked: elements with .back_to_followers class.
This question already has an answer here:
Calling a function in jQuery with click()
(1 answer)
Closed 9 years ago.
I have a div that has a click() action that causes some animations on some other elements. That's all working well and good.
The problem is that there are some links within this div that have stopped working.
For example, here is a simplified example:
<div class="clickable-div">
<a href="#" onclick="javascript:my_function();">
</div>
$(document).ready(function() {
$('div.clickable-div').click(function() {
...
});
});
What can I do to run my_function when that link is clicked?
Another consideration is that there is plain text and images within clickable-div. I would like to still trigger .clickable-div when those items are clicked.
Edit:
Another strange thing. There is a mailto link within this div. When I click the mailto link, my browser does the mailto action (opens a compose window in my mail client), but it also does .clickable-div.click. I would prefer that it doesn't do both.
Have a look here: http://jsfiddle.net/J2jMV/
CODE
$('div.clickable-div').click(function() {
alert("I'm not your function");
});
$('div.inner').click(function(e) {
e.stopPropagation();
alert("I'm INNER!");
});
$("#clickme").click(function(e){
e.stopPropagation();
alert("Hello my function");
});
have also a look here for event bubbling: http://javascript.info/tutorial/bubbling-and-capturing
hope it helps
Maybe I'm misreading the question, but it looks like you simply need to point to a different selector, also remove the onclick="", and simply put that function within the jQuery click event handler.
Also, you want to separate JS from HTML (it's a best practice). Having onclick events also creates inline scripts in older browsers like IE8-- and can slow performance.
<div class="clickable-div">
<a href="#">
</div>
$('div.clickable-div a').on('click', function () {
// do the things you already had here, only if there is no mailto
if ($(this).attr('href').indexOf('mailto') <= -1) {
e.preventDefault(); // this will prevent the mailto
// now run your my_function animations
my_function();
}
});
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.