disable a link after click using jQuery - javascript

I have a number of links (A elements) STYLED AS buttons with class "btn" and when one of them is clicked, I want that particular button to be disabled. this code doesn't work:
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
There are a gazillion tutorials for preventing the default event of a form submit button, and then disabling that, but that is not quite what I need...
Apparently, my $this isn't pointing to the correct object, or something =)
----------- UPDATE ---------------
SORRY, update above. The element I have is not a button, it is a link styled as a button...

Don't try to disable the Anchor tag. Try to set the href instead.
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).off("click").attr('href', "javascript: void(0);");
//add .off() if you don't want to trigger any event associated with this link
});

You only need to stop defaultevent from links.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
e.preventDefault();
});

This works for me:
$('a').css("pointer-events", "none");

In my case I used the following:
onclick="$(this).css('pointer-events', 'none');"

It works fine.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class='btn'>But1</button>
<button class='btn'>But2</button>
</div>

Instead of using this, you can just specify your target by using its id.
$('.btn').on('click', function(e) {
$('#btn2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button</button>
<button id="btn2" class="btn">Button</button>
<button id="btn3" class="btn">Button</button>
Hope it helps

$('.btn').on('click', function(e) {
$(this).attr('disabled', true);
});
Check this post: https://stackoverflow.com/a/5876747/5243272

This works (in chrome), but perhaps some drawbacks?
$('.btn').on('click', function(e) {
if( $(this).prop('disabled') == true) {
return false;
}
$(this).prop('disabled',true);
});

$(document).ready(function() {
$('.btn').on('click', function(e) {
e.stopPropagation();
e.preventDefault();
alert('I have been clicked!');
$(this).css('pointer-events', 'none').css('cursor', 'default');
});
});
This will prevent any other further clicks on that link.

If your Html like this
This is another paragraph.
use below code :
$(".test").one("click", function() {
var clas = $(this).attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
If your Html like this
<button class="btn">This is another paragraph.</button>
use below code :
$(".btn").one("click", function() {
var clas = $(this).parent().attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});

Related

Jquery trigger.click() on buttons not working sometimes

The requirement is simple on my page, When I click one button I want to automatically click a hidden button.
This is what I am using:
(function($) {
$(document).on('click', '#button1', function() {
//code to display some divs and hide some divs
$('#button2').trigger('click');
});
})
It is working sometimes and sometimes the button is not clicked. I am not sure what is wrong with this. Any help is greatly appreciated.
See this code lines.It works. I see when you use the IIFE you don't pass the jQuery object. Or try to compare with your code lines.
(function($) {
$('#button1').on('click', function(){
console.log('button1');
});
$('#button2').on('click', function(){
console.log('button2');
})
$(document).on('click', '#button1', function() {
//code to display some divs and hide some divs
$('#button2').trigger('click');
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='button1'>A</button>
<button id='button2'>B</button>
you could also do this
(function($) {
$('#button1').on('click', function(){
console.log('button1 and button clicked ');
});
$('#button2').on('click', function(){
console.log('button2 clicked');
})
$(document).on('click', '#button1', function() {
//code to display some divs and hide some divs
$('#button2').click();
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='button1'>clickme btn1</button>
<button id='button2'>clickme btn1</button>
You can try this also:
$(function() {
$('#button1').on('click', function(){
console.log('button1 clicked ');
});
$('#button2').on('click', function(){
console.log('button2 clicked');
});
$('#button1').click(function(){
$('#button2').click();
});
});
<body>
<button id='button1'>button1</button>
<button id='button2'>button2</button>
</body>

How to change onclick so it works on phone browsers?

I am using a button on my webpage to call a javascript function like this:
<button onclick=" updateText(); "> Update </button>
I want this button to work on both computers, and phone/I-pad browsers. The phone browsers use TAB, not mouse click.
How should I update the button code so it works on phone browsers as well?
I'm not using jquery
Thanks
You can do this-
Html-
<button id="updateText" > Update </button>
Jquery-
$(document).ready(function(){
$('#updateText').on('click touchstart', function() {
//your code
});
});
In Javascript:-
<script>
var updateTextFunction = function(){
alert('hi');
};
window.addEventListener('load', function(){
var updateText= document.getElementById('updateText')
updateText.addEventListener('touchstart', function(e){
e.preventDefault();
updateTextFunction();
}, false)
updateText.addEventListener('click', function(e){
e.preventDefault();
updateTextFunction();
}, false)
});
</script>

JQuery on click display Save Button

I am trying to make a simple profile linked to our company database, in which clients can log in and check their details. Basically, I need a function that will display a Save button when the edit button is clicked. As soon as I press cancel, the save button should disappear again.
I am a bit of a noob, so maybe I am missing something very simple, for which I apologise. The code and JSFiddle follow:
http://jsfiddle.net/65D9C/26/
<HTML>
<button src="#" id="littleButton">Edit Profile</button>
<div id="button-sm">
<input type="submit" class="ButtonSm" value="Save" id="save_button" name="save_button"></input>
</div>
</HTML>
<script>
$(document).ready(function () {
var SaveButton = $('#button-sm');
$(SaveButton).hide();
$('#littleButton').onclick(function (e) {
$(SaveButton).animate({
'opacity': 'toggle'
});
});
});
</script>
Working Demo : JSFiddle
It should be click event not onclick also you have to include jQuery library you can download from here jQuery 1.11.1
Try this :
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.animate({
'opacity': 'toggle'
});
});
});
For more info about click event see jQuery click event
there is click event not onclcik
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').on('click',function (e) {
SaveButton.show();
});
});
and you didn't include js in your fiddle.
DEMO
Try this : use click instead of onclick and you can use show("slow") to display show button
$(document).ready(function () {
var SaveButton = $('#button-sm');
$(SaveButton).hide();
$('#littleButton').click(function (e) {
var buttonLbl = "Edit Profile";
if($(this).text()!="Cancel")
buttonLbl="Cancel";
$(this).text(buttonLbl);
$(SaveButton).toggle('slow');
});
});
Demo
You did not include any jquery and also there is no onclick in jquery .so you have to use click event
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.animate({
'opacity': 'toggle'
});
});
});
Updated Demo
You have several problems in your code. First of all should be click instead of onclick.
See the code:
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.show();
});
});
Updated jsFiddle
Try this (and sorry for my awful english)
JS - section
$(document).ready(function () {
$('#littleButton').on("click", function (e) {
e.preventDefault();
$("#button-sm").fadeIn(300);
});
$('#cancelButton').on("click", function(e){
$("#button-sm").fadeOut(300);
});
});
This jQuery show your SAVE button when you click on "EDIT" button and hide you button if you click on a "CANCEL" button (with id "cancelButton")
But you have to set this in your css first of all
CSS section
#button-sm {
display:none;
}

jquery using trigger('click') within the click handler

I am trying to create a custom confirm dialog when user clicks on a link with specific class. It's pretty trivial, but the catch is, if the user clicks on the "Confirm" button in the dialog (Using Twitter Bootstrap 3), I want to trigger click on the same link, but this time instead of showing dialog, to follow the link.
Everything is well up to the point when I want to trigger a click event on the <a> tag with some parameters. Here is very simplified sample of what I want to achieve
Html:
<a class="initial" href="http://yell.com">click me</a>
<div class="dialog hidden">
Click me again
</div>
JavaScript:
$(document).on('click', 'a.initial', function(e, forced){
//return true;
if(typeof(forced) !== 'undefined' && forced === true){
$(this).addClass('clicked');
console.log('Clicked');
return true;
} else{
e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
}
});
$(document).on('click', 'div.dialog a', function(e){
$(this).parent().addClass('hidden');
$(this).parent().prev().trigger('click', [true]);
});
Here is JSFiddle sample
As you can see, if the second link is clicked, the first link is colored in red, as well as console.log triggers message, but then the link doesn't follow the url. Unfortunately, I don't see any error or warning which could give me some clue. I know I can use window.location = $(element).attr('href'), but I am wondering why it is not working in the described way?
Any help is much appreciated.
It's possible to do this, for example, running
document.getElementById('nav-tags').click();
On this page will take the user to the tags page.
Therefore, it seems the issue is the jQuery trigger function.
The problem then becomes, being able to natively trigger the click event but also pass that forced boolean into the event.
The solution I came up with is to remove the second argument, and to set a state in the original link via data:
$(document).on('click', 'a.initial', function(e){
//return true;
if($(this).data('trigger') === true) {
$(this).addClass('clicked');
console.log('Clicked');
} else{
e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
$(this).data('trigger', false);
}
});
$(document).on('click', 'div.dialog a', function(e){
$(this).parent().addClass('hidden');
$(this).parent().prev().data('trigger', true).get(0).click();
});
JSF
You can consider to use a solution like this:
$(document).on('click', 'a.initial', function(e, forced){
e.preventDefault();
$('div').removeClass('hidden').find("a").attr("href",this.href);
});
:) like #Archer suggest solution.
Try this:
$(document).on('click', 'a.initial', function(e, forced){
e.preventDefault();
//return true;
if(typeof(forced) !== 'undefined' && forced === true){
$(this).addClass('clicked');
console.log('Clicked');
return true;
} else{
//e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
}
});
$(document).on('click', 'div.dialog a', function(e){
e.preventDefault();
$(this).parent().addClass('hidden');
$(this).parent().prev().trigger('click', [true]);
});
okey. I found something. This is already a bug in jquery as per the below ticket, but closed.
http://bugs.jquery.com/ticket/11326
And the workaround is adding a span(or similar) inside the anchor and add click on that. Please find below the fiddle for same
http://jsfiddle.net/RCmar/2/
HTML
<a class="initial" href="http://yell.com"><span>click me</span></a>
<div class="dialog hidden">Click me again</div>
JS
$(document).on('click', 'a.initial span', function(e, forced){
//return true;
alert(1);
if(typeof(forced) !== 'undefined' && forced === true){
$(this).addClass('clicked');
console.log('Clicked');
return true;
} else{
e.preventDefault();
$(this).removeClass('clicked');
$('div').removeClass('hidden');
}
});
$(document).on('click', 'div.dialog a', function(e){
$(this).parent().addClass('hidden');
$(this).parent().prev().children().trigger('click', [true]);
});

Append <div> with click and remove with click

I have the following problem:
I append the div:
$(".class").click(function() {
$(this).append("<div class='click'></div>");
$("div.click").show();
});
Then i remove it with a click on another button but the div is still there.
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});
Try keeping a pointer to the div the following should work.
var tempDiv;
$(".class").click(function() {
tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
tempDiv.remove();
});
Otherwise you can use this way
$(".class").click(function() {
$("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
$('.click').remove();
});
PS: You may also remove the .show() if the .click class is not hidden by default
Try this
You have two buttons.
Say:
<div class="Main">
<div>Div0</div>
</div>
<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>
and JS Code is :
var counter=1;
$(".button1").click(function() {
$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});
$(".button2").click(function() {
$('.Main div').remove(':last-child');
});
Here is an example based on your work : http://jsfiddle.net/UQTY2/128/
<div class="class">Click to add a green box</div>
<button class="button">Click to remove all green boxes</button>
$(".class").click(function() {
$(this).append("<div class='click'></div>");
});
$(".button").click(function(e) {
e.preventDefault();
$("div.click").remove();
});
this will remove
$(".button").on("click", function (e) {
e.preventDefault();
$("div.click").remove();
});
check my fiddle
http://jsfiddle.net/suhailvs/4VmYP/2/
When you dynamicly create element, you need delegated-event: .on( event, selector, handler(eventObject) ).
$(document).on("click", ".button", function(e){
e.preventDefault();
...
$("div.click").hide();
});
If you want remove element, you shoud use .remove() method instead of .hide().
you can dynamically add and remove div with javaScript like this
Check this example
Add and Remove Div dynamically
in this example the default remove button remove the most recent added div or you can say the last div in the container
But if you want to remove particular div with div place number you can enter the div number .
Code example
HTML
<div class="Main">
<div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>
<label>Enter div number to remove</label>
<input id="V"/>
<button id="Vok">ok</button>
JS
var counter=0;
$("#ok").click(function(){
$('.Main').append('<div> new div'+counter+'</div>');
counter++;
})
$("#del").click(function(){
$('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
var Val=$('#V').val();
$('.Main div:nth-child('+Val+')').remove();
})
remove "on" from
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});

Categories

Resources