I already have a jQuery .on() function in which click event is passed on a button.
I want to restrict user from clicking button more than 1 but i don't want to alter current function instead write new function
$('button').on('click', function() {
alert('hi');
});
$('button').click(function(event) {
var count = 0;
count = count + 1;
if (count > 1) {
event.preventDefault();
console.log('dont call alert');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Click Me !</button>
I think you are looking for something like following.
$('button').on('click', function () {
alert('hi');
});
var isCliked = true;
$('button').click(function () {
$('button').off('click');
isCliked && $('button').click(function() {
console.log('dont call alert');
isCliked = false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Click Me !
</button>
JQuery off() method remove event handler of element. You can remove click event of button when it clicked. Using this work, button click event fired only once.
$("button").click(function(event){
alert();
$(this).off("click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button</button>
You can use jQuery .one() method:
$('button').one('click', function() {
alert('hi');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Click Me !</button>
Related
How can I make .click() in jquery, but name of div id is in array (after calling .each() function)?
I have code like this:
<!DOCTYPE html>
<html>
<head>
<title>Test website</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<div id="first_div_id" class="div_class"><button type="button">Button no 1</button></div>
<div id="second_div_id" class="div_class"><button type="button">Button no 2</button></div>
<script>
var ArrayWithDivId = [];
$(document).ready(function() {
$('.div_class').each(function() {
ArrayWithDivId.push(this.id); //Add div id to array
});
});
$(ArrayWithDivId[0]).click(function() {
alert("Button no 1 clicked");
});
$(ArrayWithDivId[1]).click(function() {
alert("Button no 2 clicked");
});
</script>
</body>
</html>
but there is something wrong with:
$(ArrayWithDivId[0]).click(function() {
alert("Button no 1 clicked");
});
It can't display that alert.
How to fix it?
There's two issues with your code. Firstly to be a valid selector you need to append # to the start of the id you push in to the array. Secondly, the click event handlers need to be placed inside the document.ready handler. Try this:
var ArrayWithDivId = [];
$(document).ready(function() {
$('.div_class').each(function() {
ArrayWithDivId.push('#' + this.id); //Add div id to array
});
$(ArrayWithDivId[0]).click(function() {
alert("Button no 1 clicked");
});
$(ArrayWithDivId[1]).click(function() {
alert("Button no 2 clicked");
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="first_div_id" class="div_class"><button type="button">Button no 1</button></div>
<div id="second_div_id" class="div_class"><button type="button">Button no 2</button></div>
That being said, the code is not optimal at all. You can simply attach the event handler to the $('.div_class') selector and use the this keyword, or the target property of the event, within the handler to refer to the clicked element:
jQuery($ => {
$('.div_class').on('click', e => {
console.log(e.target.textContent + ' clicked');
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="first_div_id" class="div_class"><button type="button">Button no 1</button></div>
<div id="second_div_id" class="div_class"><button type="button">Button no 2</button></div>
Please try this,
$("#"+ ArrayWithDivId[0]).on('click', function() {
alert("Button no 1 clicked");
});
Also please move your click function into document.ready function.
<script>
var ArrayWithDivId = [];
$(document).ready(function() {
$('.div_class').each(function() {
ArrayWithDivId.push(this.id); //Add div id to array
});
console.log(ArrayWithDivId);
$("#"+ArrayWithDivId[0]).click(function() {
alert("Button no 1 clicked");
});
$("#"+ArrayWithDivId[1]).click(function() {
alert("Button no 2 clicked");
});
});
</script>
You are missing this one.
$(`#${ArrayWithDivId[0]}`).click(function(){
alert("Button no 1 clicked");
})
I am looking for something like:
if (..button1 is pressed..){
some function
}
if (...button2 is pressed...){
some other function
}
But all of those need to be a part of some completely different function.
Something like:
$(document).ready(function () {
$(".Test").hover(function () {
if (...Button is pressed...) {
$('.dropdown').slideToggle('medium');
}
});
});
I'm assuming you want a to attach event listener to a few buttons? In that case you can do it like the following code:
$(document).ready(function () {
$('#btn1').click(function() {
// do stuff with button 1
console.log('button 1 clicked');
});
$('#btn2').click(function() {
// do stuff with button 2
console.log('button 2 clicked');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn1'>button 1</button>
<button id='btn2'>button 2</button>
You may use target to find clicked button id and store that id on global variable to use in hover.
var id ='';
$("button").click(function(e){
id= e.target.id;
});
Later on hover you can use that global variable.
$(".Test").hover(function () {
if (id=='matchYourID') {
$('.dropdown').slideToggle('medium');
}
});
Example
$(function(){
$('#button1').click(function(event){
alert('button 1 clicked');
});
$('#button2').click(function(event){
alert('button 2 clicked');
});
});
<!DOCTYPE>
<html>
<head></head>
<body>
<button id='button1'>button 1</button>
<button id='button2'>button 2</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
I have this simple javascript function:
<script type="text/javascript">
var popup = '0';
if(popup == '0') {
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
popup = '1';
});
});
}
</script>
<button class="button">Test</button>
I want the function to alert only on the first click but it keeps working although I changed the value of popup to 1
What you need is .one() function. It makes sure the code is triggered only once for you.
Docs: http://api.jquery.com/one/
Docs example:
$( "#foo" ).one( "click", function() {
alert( "This will be displayed only once." );
});
Write the code as follows:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
popup = '1';
}
});
});
</script>
Once your click listener is set, your previous if statement's location wasn't executed anymore. Only the code inside the on click function.
Alternatively, you can unbind the onClick listener instead of setting popup = '1'. Try the following:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
//unbinds *all* listeners previously registered on "document"
$(document).unbind('click');
});
});
</script>
Much cleaner, and as Mathletics has mentioned, cleans unnecessary callbacks from memory.
Try:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
}
popup = '1';
});
});
</script>
You had a function that was setting popup to 1 but was never checking its value again. This way it gets checked and should work properly.
I have this piece of code in my page
<body onmouseup="fun()">
.......
.......
<button id="ele">Exclude</button>
</body>
How can i achieve something like this
function fun()
{
if(MOUSE RELEASE IS ON TOP OF BUTTON #ele)
{
console.log('Mouse released on top of the button');
}
else
{
console.log('Mouse released');
}
}
If you're using jQuery I would suggest using .on() to bind events. You can use the event.target element to see if it was the button.
$(document).ready(function(){
$('body').on('mouseup', fun);
function fun(event){
if($(event.target).is('#ele')){
console.log('Mouse released on top of the button');
}else{
console.log('Mouse released');
}
}
});
Use event.stopPropagation, like this:
html
<button id="ele">Exclude</button>
<br>
<br>
<div>fun</div>
js
document.body.onmouseup = function(){ fun(); };
function fun(){
console.log("fun");
}
var el = document.getElementById("ele");
el.onmouseup = function(e){ e.stopPropagation(); };
demo: http://jsfiddle.net/GgKsQ/
and here is a demo using jQuery's mouseup: http://jsfiddle.net/GgKsQ/1/
This is an orthodox code it gives you what you required.
please copy into your editor and check.
<!DOCTYPE html>
<html>
<body onmouseup="fun()">
The content of the body element is displayed in your browser.
<br/><br/><br/><br/><br/><br/><br/><br/>
<div id="Exclude" onmousedown="fun2()"> Exclude Me Please </div>
</body>
<script>
var idPressed = 0;
function fun() {
if (idPressed == 0)
console.log('Mouse released');
idPressed = 0;
//alert("Whatever "+this.id);
}
function fun2() {
idPressed = 1;
console.log('Mouse released 2');
//alert("Whatever 2"+this.id);
}
</script>
</html>
The code
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Hello!");
});
$(".demo").click(function() {
alert("I am demo");
});
</script>
<body>
<button class="demo">click me</button>
</body>
The first Hello! is OK, but I am demo can't?What's the matter?
the similar question
jquery each selector doesnt work
Your click event handler is trying to bind to the demo button before the HTML body has rendered. You need to assign the event handler inside your $(document).ready function:
Change this:
$(document).ready(function() {
alert("Hello!");
});
$(".demo").click(function() {
alert("I am demo");
});
To this:
$(document).ready(function() {
alert("Hello!");
$(".demo").click(function() {
alert("I am demo");
});
});
Bind the click event inside ready()
$(document).ready(function() {
alert("Hello!");
$(".demo").click(function() {
alert("I am demo");
});
});
see this demo
$(".demo").live('click',function() {
alert("I am demo");
});