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>
Related
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);
});
I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?
Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")
You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});
You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/
you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>
Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});
concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>
If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});
Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?
You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.
Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)
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;
}
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();
});