This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 years ago.
I want login area (in code below) to toggle on login button click. Also, I need login area hidden when clicked anywhere outside of login area, but not on login button.
<button id="loginBtn">Login</button>
<div id="loginArea">
<!-- here is login form -->
</div>
How can I achieve this?
Using:
$('body').on('click', '#loginBtn', function(){
$('#loginArea').show();
});
Will show the login, while the following will remove it when you click outside of it:
$(document).on('click', 'body:not(#loginArea)', function(){
$('#loginArea').hide();
});
$(function() {
$('#loginBtn, #loginArea').on('click', function(e) {
$('#loginArea').show();
e.stopPropagation();
});
$('body').on('click', function() {
$('#loginArea').hide();
});
});
If the click is within the login area or on the button, then the event will not make it to the second handler to hide the login area.
How's that?
$('#loginBtn').click(function (e) {
$('#loginArea').toggle();
e.stopPropagation();
});
$(document).on('click',function () {
$('#loginArea').hide();
});
Related
This question already has answers here:
JQuery / JavaScript - trigger button click from another button click event
(7 answers)
Closed 2 years ago.
As the title says. How can I achieve this?
Thanks in advance!
$('.notVisible').click (function(){
alert("im the invisivle button")
});
$('.visible').click (function(){
alert("im the visible button")
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div style="display:none">
<button class="notVisible">I'm invisible</button>
</div>
<div>
<button class="visible">I'm visible</button>
</div>
Click visible Button -> onclick to hide visible Button and show notVisible Button
Click notVisible Button -> onclick to hide notVisible Button and show visible Button
$('.notVisible').click (function(){
$(this).hide();
$(".visible").show();
alert("im the invisivle button")
});
$('.visible').click (function(){
$(this).hide();
$(".notVisible").show();
alert("im the visible button")
});
.notVisible{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="notVisible">I'm invisible</button>
<button class="visible">I'm visible</button>
It's not so clear what it means but "active click on a second button", if you want to "activate" the second button by bshowing it, or "activate" it by clicking it
I assume you mean the second way, in which case just add a click event to one, and inside the event, .click the other, you don't event need jQuery
btn1.onclick = () => btn2.click()
If you wanted to show the hidden button when one is clicked then just change the style from hidden to nothing and back, or add a class with hidden and toggle it
btn1.onclick = () => btm2.classList.toggle("hidden")
Then for hidden just do
`
.hidden{
display: none
}
I am working on a final project due in less than 24 hours and am working on the final requirement, which is to add custom Javascript to my code that is not complete bootstrap.
I have a bootstrap created form with a submit button. I used jQuery to trigger a bootstrap modal to appear displaying a success message upon the clicking of that button. The modal closes when the user clicks the "x" or clicks outside the modal window.
Once the modal window closes, I am attempting to hide the form from the page using jquery. Here is my code snippet below:
//the modal submit button click event
$('#myModal').modal(show);
//the form dissapears after the modal is closed. #formToggle is the id applid to the <form>
$(document).ready( function() {
$('#formToggle').on('show', function(){
$('#formToggle').remove();
});
});
Listen when the modal is closed
$(document).on('hidden.bs.modal', '#myModal', function () {
$("#formToggle").hide();
});
https://jsfiddle.net/yd9nffxe/6/
use hidden.bs.modal:
$('#myModal').on('hidden.bs.modal', function(){
// do your stuff here...
});
hidden.bs.modal occurs when the modal is fully hidden (after CSS transitions have completed)
This question already has answers here:
Get clicked element in delegated event with jQuery
(2 answers)
Closed 6 years ago.
I am generating modal box dynamically. In that modal i have two button. Yes & No.
No will close the modal and that is working properly.
I am facing problem while clicking on Yes button.
Once user click on Yes it will update the database.
Here is the code.
<script type="text/javascript">
$('document').ready(function(){
$("#btnYes1").on("submit", function(e) {
// $('#btnYes1').click(function (e) {
//$('#btnYes1').click(function() {
e.preventDefault();
alert('working');
});
});
</script>
Code used to generate Modal box. You can see i tried 2-3 things but it is not working.
var modalval='Yes';
modalval += 'No'; $('#modaltext').append(modalval);
Attach the event listener to your document instead.
$(document).on("click", "#btnYes1", function(e) {
// Your code..
});
Your jQuery will run only once - when the page is first loaded. The "btnYes1" element does not exist at that point.
You need to register the event after the modal has been generated and the button is on the page.
// after modal has been generated
$("#btnYes1").on("submit", function(e) {
e.preventDefault();
alert('working');
});
For example, put that code in the success from the AJAX call that loads the modal.
For this question there are some other related questions which explains the possibility of the re enabling of input field or button using disabled attribute.
But my requirement is for re-enablebing the div click functionality after some action. Currently I'm using .off() for disabling the click function of a div after first click.
But I'm not able to re-enable it back.
Code where div is disabled
$(document).ready(function(){
// Will ask for city through voice when user click on the instruction box.
var accessBtn = $('#skitt-listening-box');
$("#skitt-listening-box").click(function(){
$(this).off('click'); // code to disble div from click
//some functionality
});
});
Code where div is enabled:
if(IsEmail($(".voice_email").val())) {
//some functionality
//Should re-enable the div to click here
});
If I were you i try adding css classes to describe state.
In your way:
$(document).ready(function(){
// Will ask for city through voice when user click on the instruction box.
var $accessBtn = $('#skitt-listening-box');
$accessBtn.click(function(){
if($(this).hasClass('click-available'){
//do action
$(this).removeClass('click-available');
}
});
});
And to enable click:
if(IsEmail($(".voice_email").val())) {
$accessBtn.addClass('click-available');
});
You can use this code:
function addClickFunctionality() {
$("#skitt-listening-box").on('click', function(){
$(this).off('click'); // code to disable div from click
// some functionality
});
}
$(document).ready(function() {
// Will ask for city through voice when user click on the instruction box.
addClickFunctionality();
});
// re-enable click handle in some action
if(IsEmail($(".voice_email").val())) {
// some functionality
addClickFunctionality();
});
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
<input id="ok" />
$('.hor-minimalist-a').on('blur','#ok',function(){
});
with this code above, i can handle events which fire If i leave the input field.
How can I detect if someone clicks outside of inputfield without coming to input. I mean the user never came to this input field before, so there was no focus at all.
$('.hor-minimalist-a').on('?','#ok',function(){
?
});
$(document).on('click', function(e) {
if ( e.target.id != 'ok' ) {
// you clicked something else
}
});
That would capture any click except on the input, but why would you need it ?
To capture only clicks on .hor-minimalist-a and not the entire document, just replace document with that selector in the code above.
How about:
$('.hor-minimalist-a').on('click',':not(#ok)',function(){
That'll register click events within .hor-minimalist-a but outside the input #ok
There is a jquery plugin for that:
http://benalman.com/code/projects/jquery-outside-events/examples/clickoutside/