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>
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 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>
I've looked at the other questions on this topic, and know that I have to do something like this:
I've created buttons:
<button id="next"></button>
<button id="prev"></button>
And then at the bottom of the page, I have this (this was taken from the other question here):
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script>
$("#next").click(function () {
api.next();
});
$("#prev").click(function () {
api.prev();
});
</script>
But it isn't working at all; can someone give me a hand with this?
it works, if next-prev are in inside impress div
$('#next').on('click', function(e){
impress().next();
e.stopPropagation();
});
$('#prev').on('click', function(e){
impress().prev();
e.stopPropagation();
});
Replace your script this way:
<script>
$("#next").click(function () {
impress().next();
});
$("#prev").click(function () {
impress().prev();
});
</script>
Have you included jQuery? If not, add this too:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
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");
});