I am trying to prevent a button from being clicked twice by accident by unbinding the click handler with .off like this...
$(".button").click(function () {
console.log("Button has been clicked and disabled");
$( ".button" ).off();
});
$(".button2").click(function () {
console.log("Button has been re-enabled");
$( ".button" ).on();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">
Click Me
</div>
<button class="button2">
Re-enable click
</button>
I am struggling with rebinding it with .on, can anyone point me in the direction of an example or point out what I am doing wrong?
In your click function for button 2, re-enable the first button's click handling with : $(".button").click(buttonOneClick);
Here is an example:
var buttonOneClick = function () {
console.log("Button has been clicked and disabled");
$( ".button" ).off();
};
$(".button").click(buttonOneClick);
$(".button2").click(function () {
console.log("Button has been re-enabled");
$(".button").click(buttonOneClick);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">
Click Me
</div>
<button class="button2">
Re-enable click
</button>
Using .one()
using .one() there's no need to use .off() since the event is allowed only once. To re-enable the button you simply re-call the enabling function that does the .one() stuff:
function buttonExec() {
console.log("Button has been clicked and disabled");
}
function buttonEnable() {
console.log("Button has been enabled");
$(".button").one("click", buttonExec); // .one()
}
buttonEnable(); // enable initially
$(".enable").on("click", buttonEnable); // and on ".enable" click
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">Click Me</button>
<button class="enable">Re-enable click</button>
Using .on() and .off()
function buttonExec() {
console.log("Button has been clicked and disabled");
$(this).off("click"); // .off() since we used .on()
}
function buttonEnable() {
console.log("Button has been enabled");
$(".button").on("click", buttonExec); // .on()
}
buttonEnable(); // enable initially
$(".enable").on("click", buttonEnable); // and on ".enable" click
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">Click Me</button>
<button class="enable">Re-enable click</button>
Related
I am fairly new to jQuery and I tried to create a show/hide toggle button without using jQuery's toggle function and I can't figure out what's wrong with the following code.
The Hide button hides the paragraph successfully. The hide part is working. It adds a class "show" and removes class "hide" and changes button's text. I used Dev Tools to see this and this part is working but clicking on the button again is not working i.e the show part.
$(document).ready(function() {
$(".hide").click(function() {
$(".content").hide();
$(this).addClass("show");
$(this).removeClass("hide");
$(this).text("Show");
});
$(".show").click(function() {
$(".content").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>
You can use toggle() to easily switch the visible state of an element using a single button. Then you can provide a function to text() to set the text on the button based on its current value. Try this:
$(document).ready(function() {
$(".toggle").click(function() {
$(".content").toggle();
$(this).text(function(i, t) {
return t == 'Show' ? 'Hide' : 'Show';
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="toggle">Hide</button>
If you wanted to do this without toggle(), then you could use toggleClass() to switch the state of the hide class, like this:
$(document).ready(function() {
$(".toggle").click(function() {
$(".content").toggleClass('hide');
$(this).text(function(i, t) {
return t == 'Show' ? 'Hide' : 'Show';
})
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="toggle">Hide</button>
You do not want to change the class - if you do you need to delegate so the event is registered to a static container like document
$(document).on("click",".hide",function() {
I suggest to toggle instead:
$(document).ready(function() {
$(".but").on("click",function() {
$(".content").toggle();
$(this).text($(this).text()=="Show"?"Hide":"Show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="but">Hide</button>
Without toggle
$(document).ready(function() {
$(document).on("click",".hide",function() {
$(".content").hide();
$(this).text("Show")
.removeClass("hide")
.addClass("show");
});
$(document).on("click",".show",function() {
$(".content").show();
$(this).text("Hide")
.removeClass("show")
.addClass("hide");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>
The click event only works when the element you add it to is built when the DOM is first created. As soon as you change the class name of the button from 'show' to 'hide' this "removes it from the DOM" in an event based sense.
To get the button click event to trigger after you change the class name on the button you must assign the click event using the on() function and the function must be placed on the parent container of the element that will trigger the event. In the example below I have added the on() method to the document object, so all elements within the document that have a class of .hide or .show will inherit these click events. This will also apply to any new elements you create on the fly.
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).on('click', ".show", function(){
$(".content").show();
$(this).addClass("hide");
$(this).removeClass("show");
$(this).text("Hide");
});
$(document).on('click', ".hide", function(){
$(".content").hide();
$(this).addClass("show");
$(this).removeClass("hide");
$(this).text("Show");
});
</script>
You should also use the toggleClass() method #mplungjan suggests.
Here's the jQuery docs for the on() function https://api.jquery.com/on/
$("#show-hide").toggle(function() {
$(".content").hide();
$(this).text("Show");
}, function() {
$(".content").show();
$(this).text("Hide");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button id="show-hide">Hide</button>
I tried to use jQuery to make a click on a specific element trigger another click on another element,
that was my code:
jQuery( ".menu-item menu-item-type-custom menu-item-object-custom
menu-item-37" ).click(function() {
jQuery(
".elementor-tab-title-2261" ).click(); });
You're logic appears to be correct, I'm assuming the class selectors you're using are not targeting the right elements, jQuery isn't being initialized, or there is an error earlier in the code that prevents this part of the code from running.
Check out this working code I wrote and compare it to what you have:
$('#btn2').on('click', function() {
console.log('btn 2 clicked!');
});
$('#btn1').click(function() {
$('#btn2').click();
});
.button {
padding: 16px;
margin: 5px;
background-color: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btn1" class="button">
<p>
Button one
</p>
</div>
<div id="btn2" class="button">
<p>
Button two
</p>
</div>
In javascript, it can be achieved through dispatchEvent
const btn1 = document.querySelector('#btn1');
const btn2 = document.querySelector('#btn2');
const event = new Event('click');
btn1.addEventListener('click', function(e) {
e.preventDefault();
console.log('Button 1 clicked');
btn2.dispatchEvent(event);
});
btn2.addEventListener('click', function(e) {
e.preventDefault();
console.log('Button 2 clicked');
});
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
jQuery
$('#btn1').on('click', function(e) {
e.preventDefault();
console.log('Button 1 clicked');
$('#btn2').click();
});
$('#btn2').on('click', function(e) {
e.preventDefault();
console.log('Button 2 clicked');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
Here is a more generalized way to do that not trigger only a click.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function myFunction(){
$(".b").trigger("click");
}
$(".a").click(function(){
$(".a").hide();
myFunction();
});
$(".b").click(function(){
$(".b").hide();
});
});
</script>
</head>
<body>
<p class="a">Click me away!</p>
<p class="b">Click me too!</p>
</body>
</html>
I want to trigger a click on "bigbutton" when hovering over a div, "div1". And if I click on any other button, the "bigbutton" needs to be unclicked and the click need to move the newly clicked button. Here's what I've tried:
Html
<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>
Jquery
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseenter(function () {
$("#bigbutton").trigger('click');
});
});
With the above code, I'm only able to do half of what I want. So, tried the following, did not work.
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseenter(function () {
$("#bigbutton").on('click');
});
$("button").click(function () {
$("#bigbutton").off('click');
});
});
PS. I'm extremely sorry about the formating errors as my phone has a broken screen.
Something like this?
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseover(function () {
$("#bigbutton").trigger('click');
});
$("#button1").click(function () {
$("#bigbutton").off('mouseover').css("background-color", "");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>
I can remove class when I click On button. I need To add the remove class again after I click on button and span display when I click On window
my HTML file
<button>Click To show Comment</button>
<span class="my_comment my_comment_none">Hello</span>
my CSS FILE
.my_comment{display: block} .my_comment_none{display: none}
my js File
$(document).ready(function () {
$("button").click(function () {
$(this).removeClass("my_comment_none");
});
});
You can attach the click event on document object and check the target name to hide or show the comment:
$(document).ready(function () {
$(document).click(function (e) {
if($(e.target).is('BUTTON'))
$('.my_comment').show();
else
$('.my_comment').hide();
});
});
.my_comment{display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click on the button to show the comment
and hide the comment on clicking anywhere else</div>
<button>Click To show Comment</button>
<span class="my_comment" id="comment">Hello</span>
use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
for window click . maintain any unique id for button and use selectors with id
$(window).click(function () {
if ($('button').hasClass("my_comment_none")) {
$('button').removeClass("my_comment_none");
}
})
;
use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
You may use simply jQuery slideToggle() function.
$("button").click(function(){
$(".toggle").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click To hide/show</button>
<div class="toggle">Hello</div>
I have a table cell which is clickable and fires a jQuery event when clicked. Within that cell I also have a button, which has another jQuery event when clicked. The issue is, when the button is clicked both the cell and button events are fired.
For example:
<script>
$(document).ready(function () {
$('#cell').click(function () {
alert('cell clicked');
});
$('#button').click(function () {
alert('button clicked');
});
});
</script>
<table>
<tr>
<td id="cell">
<button id="button">go</button>
</td>
</tr>
</table>
How can I prevent the cell click event being fired when the button is clicked?
You can use stopPropagation() which allow you to stop bubbling of event to the parent dom.
Example
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});
set the table width to 100% and test it.
Test Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#cell').click(function () {
alert('cell clicked');
});
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});
});
</script>
<table width="100%">
<tr>
<td id="cell">
<button id="button">go</button>
</td>
</tr>
</table>
stop the event propagation which is called event bubbling to the parent:
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});
You need to use
stopPropagation
This example should fix it:
$(document).ready(function () {
$('#cell').click(function () {
alert('cell clicked');
});
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});
});
That should fix it.
$(document).ready(function(){
$('#cell').click(function(event){
if($(event.target).is('#button')){
event.stopPropagation();
}
});
});