I have this href in my html:
<a id="m_MC_hl6_8" class="no_loaderbox button_link inline_block " href="somelink" target="_self">link</a>
When clicked on the link, a div is shown to show a waiting box.
For this specific link I don't want that so I wrote a piece of jquery to hide the div when clicked on the link.
$(document).ready(function() {
$(document).on('click', 'a.no_loaderbox', function(e) {
$('.loaderBox').hide();
});
});
But the line with hide is never hit.
I can't use the id because the link is dynamically created.
What am I missing here?
You can either return false or use e.preventDefault as Adel Elkhodary mentioned in the comments above. Then select the correct element and apply the method hide().
Here is the working code:
$(document).ready(function() {
$(document).on('click', 'a.no_loaderbox', function(e) {
$('.no_loaderbox').hide();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="m_MC_hl6_8" class="no_loaderbox button_link inline_block " href="somelink" target="_self">link</a>
Return false or e.preventDefault were not the answers I was looking for.
I got the problem resolved by binding the event directly on the element $('a') instead of with $(document) and class.
Related
I have a button that's located in an anchor, and that button has some logic that's triggerd by clicking on it.
The problem is that whenever I click on that button, the app get's redirected due the anchor parent element.
<a href="foo" id="bar">
<span id="button">click me</span>
</a>
I tried using .stopPropagation() like it's mentioned in this post, however it doesn't work.
I tried:
$('#button').on('click', function(e) {
e.stopPropagation();
})
Here's the fiddle.
However, if I replace the parent anchor with a div, then it works - JSFiddle
Am I doing something wrong?
Update: I know I can prevent redirecting with e.preventDefault(), however, I want when I click on the parent element to redirect, and when I click on the button not to redirect and start doing my JS functions (open modal).
Try this:
$('#bar').on('click', function(e) {
if( $(e.target).is('#button') ) {
e.preventDefault();
//your logic for the button comes here
}
//Everything else within the ancho will cause redirection***
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="foo" id="bar">OK
<span id="button">click me</span>
</a>
Try:
e.preventDefault();
Fiddle: http://jsfiddle.net/hfyy10a8/3/
You should use e.preventDefault(); on links:
$('#bar').on('click', function(e) {
e.preventDefault();
});
You can also add it on your example, all together:
$('#button').on('click', function(e) {
e.stopPropagation();
e.preventDefault();
});
use return false:
$('#button').on('click', function (e) {
//some logic
$(this).css('color', 'red');
return false;
});
The reason why stopPropagation wont work is because it will prevent event handlers from running, not native behavior.
Try to use e.preventDefault() instead:
$('#button').on('click', function (e) {
e.preventDefault();
});
See this explanation for why e.stopPropagation() is not working.
I know this question already has an answer but however, I made mine work by returning false on the "onclick" attribute of the child element.
<a href="https://google.com">
<button onclick="return doTask()">Do not navigate</button>
</a>
function doTask(){
//... write action
return false; <- This prevents the click action from bubbling up to parent tag
}
JS Fiddle Link
I am dynamically adding some elements and my div looks like:
<div class="knock" href="#">
<!-- Do Something if links are not clicked -->
Google
Facebook
</div>
And my on script is:
$(".knock").on("click", function(){
console.log("Link not clicked");
alert("Link not Clicked");
});
My Problem, I do not want to fire the alert when the links are clicked. Is there a way out?
You can write anchor tag event and stop event Propagation of the event to upper DOM elements so that alert only comes up when the div is actually clicked, but not when some anchor tag inside div is clicked:
$(".knock").on('click',"a",function(event){
event.stopPropagation();
})
FIDDLE:
http://jsfiddle.net/hbac7vbh/2/
event.stopPropagation:
The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
See details here on jquery official page
Just determine if the a is clicked based on the event that is passed.
Updated Example
$(".knock").on("click", function(e){
if(!$(e.target).is('a')){
console.log("Link not clicked");
alert("Link not Clicked");
}
});
Add this to your js:
$(".knock a").on("click", function(e) {
return false;
});
Why not add another method as
$('a').on('click',function(e){
e.stopPropagation();
});
This will stop porpagation of the chaininvocation of events on parent elements.
See updated Fiddle
This is my code :
<html>
<body>
<button class="myclass" data-card-id="1">Save</button>
</body>
</html>
My question is how whould look like a function that when user click on any of "myclass" buttons submit a variable with data-card-id of the specific card in a php file.
Thank you ! :)
this is using Jquery:
$(".myclass").click(function(){
$(this).attr( "data-card-id" );
});
JSFIDDLE - http://jsfiddle.net/q5j8z/11/
see browser console for data display
// change the selector "ul li a" to your button
$('ul li a').click(function (e) {
e.preventDefault();
var value = $(this).data('value');
$('.button').data('value', value);
console.log($('.button').data('value'));
});
$('.button').click(function (e) {
e.preventDefault();
console.log($(this).data('value'));
});
This can be accomplished through an additional selection feature. I believe "data-card-id" is an attribute of your html tag, so you have two choices.
Bind the click to the element using the selector or delegate it to the body of the document, I think you'll see how either way works here.
Option 1. The advantage here is that when click events bubble up to the body this will check and execut appropriately, even if other buttons are added to the page after this code is executed. This is jquery's click delegation feature
$('body').on('click', 'button[data-card-id="1"]', function(){
//perform your action
});
Option 2. This binds the click event to the object itself. This can be more straight forward and has its advantage in simplicity.
$('button[data-card-id="1"]').click(function(){
// perform some action
});
And of course you have a plethora of other approoaches......
or
$('button').each(function(){
if($(this).attr("data-card-id") == '1'){
$(this).click(function(){
//some action
});
}
});
There are other approaches, too. Let me know if none of these seem to work.
JS FIDDLE DEMO
The most simpler would be to use this code -- >
just change this card-id to this cardid
HTML
<button class="myclass" data-cardid="1">Save</button>
<button class="myclass" data-cardid="2">Save</button>
JS
$(document).ready(function(){
$(".myclass").on('click',function(){
var cid = $(this).data("cardid");
alert(cid);
});
});
I am trying to disable a link that submits my form after it has been clicked. This is needed to stop duplicate requests from the same user. Here is my code, but unfortunately it is not working.
<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>
<script type="text/javascript">
$('#submit-form-link').click(function(){
$('submit-form-link', this).attr('style', 'pointer-events: none;');
});
</script>
I feel like I am close but it just is not working.
You're going about this wrong. Get rid of the inline onclick event handler and use this inside a document ready call:
$('#submit-form-link').one('click', function(){
$('form').submit();
});
This binds the click event to your link, but unbinds it after the first click.
You can see this in the console in this jsFiddle example. The first time you click the link it attempts to submit the form, but doesn't try on subsequent clicks.
Try this:
...
$('submit-form-link').off().click(function() { return false; });
...
<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>
<script type="text/javascript">
$('#submit-form-link').click(function(){
if (!$(this).hasClass('disabled')) {
$('submit-form-link', this).attr('class', 'next disabled');
return true;
}
return false;
});
</script>
Here, you can create a class disabled and style it as you want. Just add this class after clicking the button so you will know that it is disabled. Then you return false to stop the event if the button was already clicked.
bind the click event again in the first click event callback function
$('#submit-form-link').click(function(){
$('submit-form-link', this).attr('style', 'pointer-events: none;');
$(this).click(function(e){e.preventDefault})
});
You have to remove the onclick attribute.
$('#submit-form-link').click(function(){
$(this).removeAttr('onclick');
});
Also, $('submit-form-link', this) is totally wrong. You are selecting nodes of type submit-form-link that are children of this. First of all you'd need #submit-form-link and second this is already a reference to the link node you just clicked.
The code is:
Done
I want this part becomes unclickable once if it is clicked, how to achieve this using Jquery or Javascript?
Use the .one() method which does exactly that ..
$(document).ready(function(){
$('#anch1').one('click', function() {
Record(/* your parameter */);
});
});
Provide the anchor tag an id and remove the onclick handler from the HTML markup.
<a id="anch1" href="#" style="color:black">Done</a>
$(function(){
$("#anch1").bind("click",function(){
// do your action here
$(this).unbind("click"); //unbinds the click event
});
});