If keep clicking the same buttons then only fire once. sample: https://jsfiddle.net/h4wgxofh/, For example, if click1 clicked then 2nd time or more times clicks should stop firing, the same as click2 however, if I click the same button, it always fires. Also I want links only trigger once but becomes available if other buttons being clicked. (considering if more buttons) Thanks
HTML
<div class="wrap">
Click1
Click2
</div>
Script
var clicked = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
clicked = true;
if(clicked = true){
console.log($this.text());
clicked = false;
}
});
I'm probably missing something here, but why not just bind the event to every link in .wrap and unbind it on click like this :
$('.wrap a').on('click', function(){
console.log($(this).text());
$(this).unbind('click');
});
See this fiddle
Edit : after your comment on wanting one link to be rebound after cliking on another, even though it might not be the cleanest solution, this does the job :
var onclick = function(){
var $el = $(this);
console.log($el.text());
$('.wrap a').off('click', onclick);
$('.wrap a').each(function(id, link){
if($el.text() != $(link).text())
$(link).on('click', onclick);
});
}
$('.wrap a').on('click', onclick);
Fiddle again
See the following code
var clicked1 = false;
var clicked2 = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
var clickOrigin = $(this).text();
if(clickOrigin == 'Click1' && clicked1==false){
console.log("Click 1 clicked");
clicked1 = true;
}
if(clickOrigin == 'Click2' && clicked2==false){
console.log("Click 2 clicked");
clicked2 = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
Click1
Click2
</div>
Also you can find the jsFiddle.
You need to Distinguish between two links(i used text here you may put whatever scenario ) see this example it may help:-
var clicked1 = 0;
var clicked2 = 0;
$('.wrap').on('click', 'a', function() {
var $this = $(this);
var $text = $(this).text();
//Click2
if ($text == 'Click1') {
clicked1 += 1;
if (clicked1 == 1) {
console.log($text);
} else {
return;
}
}
//Click2
if ($text == 'Click2') {
clicked2 += 1;
if (clicked2 == 1) {
console.log($text);
} else {
return;
}
}
});
Full Demo
To disable both buttons after first click, try:
var clicked = false;
$('.wrap').on('click', 'a', function(){
let $this = $(this);
if( !clicked ){
console.log($this.text());
clicked = true;
};
});
To disable each button after first click, try:
$('.wrap a').each(function() {
let $this = $(this);
$this.disabled = false;
$this.on('click', function() {
if ( !$this.disabled ) {
console.log($this.text());
$this.disabled = true;
};
});
});
Every time someone clicks one of the buttons, your script is setting clicked from false to true, checking if the value is true, then setting it to false again. You need to format it like this if you only want the buttons to fire once (obviously you'd have to duplicate this specifically for each button with different IDs):
var clicked = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
if(clicked == false){
console.log($this.text());
clicked = true;
}
});
try this ,much simpler and this will be more useful if you have multiple click buttons
if you had implemented some other way ,this will worth a try
<div class="wrap">
Click1
Click2
</div>
$('.wrap').on('click', 'a', function(){
var $this = $(this);
if($this.attr("data-value") == ""){
console.log($this.text());
$this.attr("data-value","clicked")
}
else{
console.log("Already clicked")
}
});
Fiddle
Instead of putting code on click just on first click disable anchor tag this serve the same thing you wants just find below snippet for more information using this we can reduces round trips to the click functions as well
$('.wrap').on('click', 'a', function(){
$(this).addClass("disableClick");
});
.disableClick{
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
Click1
Click2
</div>
I think you can disable anchor link after one click like this
<div class="wrap">
Click1
Click2
</div>
I think you can disable anchor link after one click like this
<div class="wrap">
Click1
Click2
</div>
$(function () {
$('#click1').on("click", function (e) {
$('#click1').on("click", function (e){
e.preventDefault();
e.preventDefault();
});
});
I think its help you.
Just use $(".wrap").one('click', ....
Read the jquery API documentation.
Related
How can I attribute an ID to the second gs-title?
I try this, but doesn't work:
var stopInterval = false;
var interval = setInterval(function($Document) {
if(!stopInterval) {
$("div > gs-title:nth-child(2)").attr("id",'pweb');
stopInterval = true;
} else {
clearInterval(interval);
}
},12000);
** Resolved **
Second problem:
My automatic click doesn't work to, here's the code:
Looking at the picture of your code I think you are trying target a.gs-title which is inside div.gs-title, for this you can simply change div > gs-title:nth-child(2) to a.gs-title
Here is an exmple:
var stopInterval = false;
var interval = setInterval(function($Document) {
if(!stopInterval) {
$("div > .gs-title:eq(1)").attr("id",'pweb');
stopInterval = true;
document.getElementById('pweb').click();
// or $('#pweb').click();
} else {
clearInterval(interval);
}
},12000);
$('a').click(function(event){
event.preventDefault();
alert($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a class="gs-title">1</a>
<a class="gs-title">2</a>
<a class="gs-title">3</a>
<a class="gs-title">4</a>
</div>
Use eq
$("div > .gs-title:eq(1)").attr("id",'pweb');
EDIT
$("#pweb").trigger("click");
let gs_elt = document.getElementsByClassName('gs-title');
Array.prototype.map.call(gs_elt,function(elt,index){
//adding click event
elt.addEventListener("click",function(event){
alert('click event succeded');
})
//setting attribut to the second child
if(index ==1){
elt.setAttribute('id','second_child_attribut');
}
})
So I have a few div tags that I have currently hidden, and I want to display them one after the other by hitting the enter key.
What I want to happen: I hit enter and the first div tag is revealed, and then I hit enter a second time to see the second div tag.
What is happening instead: I hit enter once and both div tags show up.
In this case, the first div tag I want to reveal is "intro", and the second is "body". I am running this website on jsbin, and I am using chrome, if that helps.
This is my JavaScript:
//***********************************************************
// BODY MODULE
var bodyController = (function(){
var enterBool;
var reveal = function(){
if(enterBool){
document.getElementById("evidence").style.display = "block";
enterBool = false;
}
};
var enterListen = function(){
document.addEventListener("keydown", function(event){
if(event.keyCode === 13){
document.addEventListener("keyup", function(event){
if(event.keyCode === 13){
enterBool = true;
reveal();
}
});
}
});
};
return{
enterBoolBody: enterBool,
enterListenBody: function(){
enterListen();
}
}
})();
//***********************************************************
// INTRO MODULE
var introController = (function(){
var enterBool;
var reveal = function(){
if(enterBool){
document.getElementById("body").style.display = "block";
enterBool = false;
}
};
var enterListen = function(){
document.addEventListener("keydown", function(event){
if(event.keyCode === 13){
document.addEventListener("keyup", function(event){
if(event.keyCode === 13){
enterBool = true;
reveal();
}
});
}
});
};
return{
enterBoolIntro: enterBool,
enterListenIntro: function(){
enterListen();
}
}
})();
//***********************************************************
// CONTROL MODULE
var controller = (function(introCtrl, bodyCtrl, evidenceCtrl, infoCtrl,
conclusionCtrl){
var eventListeners = function(){
introCtrl.enterListenIntro();
bodyCtrl.enterListenBody();
};
return{
init: function(){
eventListeners();
}
}
})(introController, bodyController, evidenceController,
infoController, conclusionController);
//***********************************************************
controller.init();
I think you might be over engineering this a bit. All you need is an event listener to check for enter. Then you check if the first div is shown, if not show it. If the first div is shown check if the second div is shown and show it.
Quick note, no IE9 support for classList if that's important to you.
https://caniuse.com/#feat=classlist
(function(window, document, undefined)
{
document.addEventListener('keyup', showDivs, false);
})(window, window.document);
function showDivs(event)
{
event = event || window.event;
var divsToShow = document.getElementsByClassName("Display-Div");
for (var i = 0; i < divsToShow.length; i++) {
if (!divsToShow[i].classList.contains("Block")) {
divsToShow[i].classList.add("Block");
break;
}
}
}
.Hidden {
display: none;
}
.Block {
display: block;
}
<div class="Hidden Display-Div">This</div>
<div class="Hidden Display-Div">Now</div>
<div class="Hidden Display-Div">Works</div>
<div class="Hidden Display-Div">With</div>
<div class="Hidden Display-Div">Any</div>
<div class="Hidden Display-Div">Div</div>
<div class="Hidden Display-Div">With</div>
<div class="Hidden Display-Div">Class</div>
<div class="Hidden Display-Div">Display-Div</div>
You can put the ids of your divs in an array, or you could assign a common class to all divs that you want to appear one by one. Assuming the first, this code simply grabs the id of the next div to display from the array and increments the counter. You could add more divs to the array and it would work.
var divs = ["evidence", "body"];
var counter = 0;
document.addEventListener("keyup", function(event){
if(counter < divs.length && event.keyCode == 13){
document.getElementById(divs[counter]).style.display = 'block';
counter++;
}
});
I have in a html page 5 button named 1,2,3,4 and 5.If 3 button are clicked the other button must be disabled.
var clicking=0;
$(document).ready(function(){
$('button').click(function(){
clicking++;
$(this).toggleClass("active");
if(clicking==3){
$('button').click(function(){
$(this).toggleClass("nothing");
})
}
})
})
I tried with this script but it don't work because all the button can be clicked.The if is ignored.
i want that only 3 of this 5 button can be clicked and the other must become disabled.
EDIT: shortened the code
I think this is what you want? Count the number of buttons with .active. If it's three or more, disable all buttons that don't have .active.
JS:
$('button').on('click', function() {
$(this).toggleClass('active');
$('button').prop('disabled',false);
if ($('.active').length >= 3) {
$('button:not(.active)').prop('disabled',true);
}
});
Here's a fiddle.
You should do something like this :
var clicking=0;
$(document).ready(function(){
$('button').click(function(){
clicking++;
$(this).toggleClass("active");
if(clicking==3){
$('button').each(function(){
if(!$(this).hasClass("active")){
$(this).addClass("inactive");
}
});
}
});
});
I didn't try it, but I think you like for something similar.
Ok i am not a master of jquery but i came up with a simple logic to implement what you want to achieve, that is disabling all the other buttons that haven't been clicked after three clicks. Here's my working code:
var count = 0;
var ids = new Array();
$(document).ready(function(){
$('button').click(function(){
ids[count] = this.id;
count++;
if(count == 3){ //three buttons clicked, now time to disable the remaining buttons
for(var i=0; i<$('button').length; i++){ //we'll check for all buttons
var id = $('button')[i].id;
var flag = true;
for(var j=0; j<ids.length; j++){ //checking all the buttons against the buttons that got clicked
if(id == ids[j])
flag = false; //button has been clicked (won't be disabled)
}
if(flag){
$("#"+id).attr("disabled", true); //disabling button
}
}
}
})
})
It's very self explanatory and i added lots of comments but still what i did is:
save the ids of buttons that got clicked, then after three clicks, disabling all the buttons who's ids don't match with the saved ids. Pretty simple.. but im sure you can make the code better as i'm not too good at jquery.
See the Working DEMO here
My sugestion is to use an array so you know witch buttons were clicked.
$(document).ready(function(){
var clickedbuttons = [];
$('button').click(function(){
$(this).toggleClass("active");
var idx = jQuery.inArray($(this).attr("id"), clickedbuttons );
if(idx == -1)
clickedbuttons.push($(this).attr("id"));
else clickedbuttons.splice(idx,1);
if(clickedbuttons.length == 3) {
$('button').each(function() {
var index = jQuery.inArray($(this).attr("id"), clickedbuttons );
if(index == -1)
$(this).attr("disabled", "disabled");
});
}
else {
$('button').each(function() {
$(this).removeAttr("disabled");
});
}
});
})
I'm assuming each button has an id. This will work as you want but you have to have an id in every button.
If you do not want to reenable change accordingly
$(document).ready(function(){
var clickedbuttons = [];
$('button').click(function() {
var idx = jQuery.inArray($(this).attr("id"), clickedbuttons );
if(idx == -1) {
clickedbuttons.push($(this).attr("id"));
$(this).toggleClass("active");
}
if(clickedbuttons.length == 3) {
$('button').each(function() {
var index = jQuery.inArray($(this).attr("id"), clickedbuttons );
if(index == -1)
$(this).attr("disabled", "disabled");
});
}
else {
$('button').each(function() {
$(this).removeAttr("disabled");
});
}
});
})
$(document).ready(function() {
// ............. Your jQuery Code goes here .............
//var myArray1 = new Array( "img1", "img2" , "img3", "img4");
var numImg = $('#thumbNail img').length; //number of images
var num = 0;
var curImg = 0;
//Prevent Image Dragging
$("img").bind('contextmenu', function(e) {
return false;
});
//Prevent Right Click on Mouse
$("img").bind("mousedown", function(e){
return false;
});
$(".leftThumbNail").live("click", function(){
alert("HY");
});
});
I am trying to have it react to when ever I click on images inside class "leftThumbnail". This class contains 2 images on the left panel. Whenever I click any of the images from that class, nothing seems to happen.
I also tried:
$(".leftThumbNail").click(function() {
alert("HEY");
});
In my "leftThumbNail" class I have the following:
<div class="leftThumbNail">
<img id = "img1" src="img/thumb/image1.jpg" class = "image1Position" alt="Image 1">
<img id = "img2" src="img/thumb/image2.jpg" class = "image2Position" alt="Image 2" >
</div>
Ok try this:
$('img').on({
contextmenu:function(e) {
e.preventDefault();
},
click:function(e){
if(e.which === 3){
e.preventDefault();
}
},
dragstart:function(e){
e.preventDefault();
}
});
$(".leftThumbNail").on('click', function(){
alert('HY');
});
This does the following:
Kills right-click by checking e.which to be specific to right-clicks
updates to .on(), the modern version of what you wanted to do
Combines your handlers for 'img' into a single .on() declaration
To consolidate it even more:
$('img').on({
contextmenu:function(e) {
e.preventDefault();
},
click:function(e){
if(e.which === 3){
e.preventDefault();
} else if($(this).hasClass('leftThumbNail')){
alert('HY');
}
},
dragstart:function(e){
e.preventDefault();
}
});
No more extra handlers ... all handled in one now!
EDIT Modified to include prevention dragging (performed by using dragstart handler). Also changed return false to the more proper e.preventDefault() to allow for bubbling.
I have 2 buttons. I want to detect if the previous button clicked then on 2nd button click it should display some data otherwise if user is directly clicking on the second button, it should display an alert(please click the previous button first). I have tried to do so but not able to detect whether the 1st button is clicked or not :-(
HTML
<input type="button" id="btn1" value="button1"></input>
<input type="button" id="btn2" value="button2"></input>
JavaScript
$('#btn1').click(function(){
alert('Button 1 Clicked');
});
$('#btn2').click(function(event) {
var inputButton = document.getElementsByTagName('input');
var $target = $(event.target);
if( $target.is(inputButton[1]) ) {
alert("Please click the 1st Button first");
} else{
alert('Button 2 Clicked');
}
});
EDIT: I chose not to use a variable, because there's not really much reason to use one. Avoiding unnecessary scope pollution, and whatnot.
HTML
<button id="btn1">First Button</button>
<button id="btn2">Second Button</button
JavaScript
$(document).ready(function() {
$('#btn1').on('click', function() {
alert('Button 1 clicked');
$('#btn2').data('btn1-clicked', true);
});
$('#btn2').on('click', function() {
var el = $(this);
if (el.data('btn1-clicked')) {
alert('Button 2 clicked');
} else {
alert('Please click the 1st button first');
}
})
});
You could use this, creating a variable to store a true/false related to the first button:
var btn_clicked = false;
$('#btn1').click(function () {
btn_clicked = true;
alert('Button 1 Clicked');
});
$('#btn2').click(function (event) {
var inputButton = document.getElementsByTagName('input');
var $target = $(event.target);
if (!btn_clicked) {
alert("Please click the 1st Button first");
} else {
alert('Button 2 Clicked');
}
});
Demo here
Try this one define a global variable to track the click of first button
var buttonclicked=false;
$('#btn1').click(function(){
buttonclicked=true;
alert('Button 1 Clicked');
});
$('#btn2').click(function(event) {
if(!buttonclicked){
alert("please click button1 first")
}else{
var inputButton = document.getElementsByTagName('input');
var $target = $(event.target);
if( $target.is(inputButton[1]) ) {
alert("Please click the 1st Button first");
} else{
alert('Button 2 Clicked');
}
}
});
I think you can put the second button function in the first one.
$('#btn1').click(function(){
alert('Button 1 Clicked');
$('#btn2').click(function(event) {
var inputButton = document.getElementsByTagName('input');
var $target = $(event.target);
alert('Button 2 Clicked');
}
});
});
You then also won't need the check in the second button.
Try to set a flag
var firstButtonClicked;
$('#btn1').click(function(){
firstButtonClicked = true;
alert('Button 1 Clicked');
});
check firstButtonClicked in second button click.