Looping a button click event in jQueryJavaScript closure inside loops – simple practical exampleIs there an “exists” function for jQuery?How do I detect a click outside an element?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How can I know which radio button is selected via jQuery?How to check whether a checkbox is checked in jQuery?Loop through an array in JavaScriptjQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
Infinite past with a beginning?
How did the USSR manage to innovate in an environment characterized by government censorship and high bureaucracy?
New order #4: World
A Journey Through Space and Time
Why is an old chain unsafe?
What is the command to reset a PC without deleting any files
What Brexit solution does the DUP want?
Is there really no realistic way for a skeleton monster to move around without magic?
DOS, create pipe for stdin/stdout of command.com(or 4dos.com) in C or Batch?
What makes Graph invariants so useful/important?
Pronouncing Dictionary.com's W.O.D "vade mecum" in English
Copenhagen passport control - US citizen
Possibly bubble sort algorithm
How much RAM could one put in a typical 80386 setup?
What do you call a Matrix-like slowdown and camera movement effect?
Shell script can be run only with sh command
How do we improve the relationship with a client software team that performs poorly and is becoming less collaborative?
How to type dʒ symbol (IPA) on Mac?
What are these boxed doors outside store fronts in New York?
I see my dog run
What is the logic behind how bash tests for true/false?
Are tax years 2016 & 2017 back taxes deductible for tax year 2018?
Is it possible to do 50 km distance without any previous training?
How do I create uniquely male characters?
Looping a button click event in jQuery
JavaScript closure inside loops – simple practical exampleIs there an “exists” function for jQuery?How do I detect a click outside an element?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How can I know which radio button is selected via jQuery?How to check whether a checkbox is checked in jQuery?Loop through an array in JavaScriptjQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
This loop doesn't seem to be working, I'm not sure where i'm going wrong but would appreciate any help.
var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>Basically on the click of the button it should alert out the number the loop is up to (right?) but it just alerts '10' on every one?
It's late and I know I must be doing something wrong, but I can't think what.
Here is a fiddle of my loop:
https://jsfiddle.net/p8v5sejr/
javascript jquery html
edited Mar 22 at 1:14
Jack Bashford
15.5k31848
asked Mar 22 at 0:57
FoxyFishFoxyFish
4921515
add a comment |
This loop doesn't seem to be working, I'm not sure where i'm going wrong but would appreciate any help.
var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>Basically on the click of the button it should alert out the number the loop is up to (right?) but it just alerts '10' on every one?
It's late and I know I must be doing something wrong, but I can't think what.
Here is a fiddle of my loop:
https://jsfiddle.net/p8v5sejr/
javascript jquery html
edited Mar 22 at 1:14
Jack Bashford
15.5k31848
asked Mar 22 at 0:57
FoxyFishFoxyFish
4921515
3
Possible duplicate of JavaScript closure inside loops – simple practical example
– Ivar
Mar 22 at 1:01
add a comment |
This loop doesn't seem to be working, I'm not sure where i'm going wrong but would appreciate any help.
var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>Basically on the click of the button it should alert out the number the loop is up to (right?) but it just alerts '10' on every one?
It's late and I know I must be doing something wrong, but I can't think what.
Here is a fiddle of my loop:
https://jsfiddle.net/p8v5sejr/
javascript jquery html
edited Mar 22 at 1:14
Jack Bashford
15.5k31848
asked Mar 22 at 0:57
FoxyFishFoxyFish
4921515
This loop doesn't seem to be working, I'm not sure where i'm going wrong but would appreciate any help.
var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>Basically on the click of the button it should alert out the number the loop is up to (right?) but it just alerts '10' on every one?
It's late and I know I must be doing something wrong, but I can't think what.
Here is a fiddle of my loop:
https://jsfiddle.net/p8v5sejr/
var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>javascript jquery html
javascript jquery html
edited Mar 22 at 1:14
Jack Bashford
15.5k31848
asked Mar 22 at 0:57
FoxyFishFoxyFish
4921515
edited Mar 22 at 1:14
Jack Bashford
15.5k31848
asked Mar 22 at 0:57
FoxyFishFoxyFish
4921515
edited Mar 22 at 1:14
Jack Bashford
15.5k31848
edited Mar 22 at 1:14
Jack Bashford
15.5k31848
edited Mar 22 at 1:14
Jack Bashford
15.5k31848
15.5k31848
asked Mar 22 at 0:57
FoxyFishFoxyFish
4921515
asked Mar 22 at 0:57
FoxyFishFoxyFish
4921515
asked Mar 22 at 0:57
FoxyFishFoxyFish
4921515
4921515
3
Possible duplicate of JavaScript closure inside loops – simple practical example
– Ivar
Mar 22 at 1:01
add a comment |
3
Possible duplicate of JavaScript closure inside loops – simple practical example
– Ivar
Mar 22 at 1:01
3
3
Possible duplicate of JavaScript closure inside loops – simple practical example
– Ivar
Mar 22 at 1:01
Possible duplicate of JavaScript closure inside loops – simple practical example
– Ivar
Mar 22 at 1:01
add a comment |
5 Answers
5
active
oldest
votes
It's about function scope and block scope
Just use let to declare i in for loop
// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) // <-- use let
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:16
birdbird
1,136720
This is what i was trying to think of but couldnt think of it! Let! I need sleep 🤣
– FoxyFish
Mar 22 at 1:20
add a comment |
It's because the loop runs, then when you click on your buttons, j is equal to 10. Since your values are coming from the button's IDs, you can use that to your advantage:
var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert($(this).attr("id").split("btn-")[1]);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:01
Jack BashfordJack Bashford
15.5k31848
Perfect solution, thanks.
– FoxyFish
Mar 22 at 1:05
No problem whatsoever @FoxyFish - if my answer fixed your problem, please mark it as accepted by clicking the grey tick mark to the left of my answer.
– Jack Bashford
Mar 22 at 1:11
add a comment |
You can grab the id off of the current target element and parse out the index.
for (let index = 0; index < 4; index++)
$('#btn-' + index).click(function(e)
var value = parseInt(e.target.id.replace(/[D+]/g, ''), 10);
alert(value);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:03
Mr. PolywhirlMr. Polywhirl
17.6k85092
add a comment |
If you do the event binding in a function you get a closure keeping the value.
var j = 0;
for (j = 0; j < 10; j++)
addClick(j);
function addClick(j)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:05
Adrian BrandAdrian Brand
4,85121124
add a comment |
Try this,
$( "button[id^=btn]" ).each(function(index)
$(this).on("click", function()
var idvalue = $(this).attr('id');
//alert(index);
//or
idvalue = idvalue.replace("btn-","");
alert(idvalue);
);
);
answered Mar 22 at 1:13
MyHealingLifeMyHealingLife
54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55291387%2flooping-a-button-click-event-in-jquery%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
It's about function scope and block scope
Just use let to declare i in for loop
// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) // <-- use let
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:16
birdbird
1,136720
This is what i was trying to think of but couldnt think of it! Let! I need sleep 🤣
– FoxyFish
Mar 22 at 1:20
add a comment |
It's about function scope and block scope
Just use let to declare i in for loop
// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) // <-- use let
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:16
birdbird
1,136720
This is what i was trying to think of but couldnt think of it! Let! I need sleep 🤣
– FoxyFish
Mar 22 at 1:20
add a comment |
It's about function scope and block scope
Just use let to declare i in for loop
// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) // <-- use let
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:16
birdbird
1,136720
It's about function scope and block scope
Just use let to declare i in for loop
// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) // <-- use let
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) // <-- use let
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) // <-- use let
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:16
birdbird
1,136720
answered Mar 22 at 1:16
birdbird
1,136720
answered Mar 22 at 1:16
birdbird
1,136720
answered Mar 22 at 1:16
birdbird
1,136720
1,136720
This is what i was trying to think of but couldnt think of it! Let! I need sleep 🤣
– FoxyFish
Mar 22 at 1:20
add a comment |
This is what i was trying to think of but couldnt think of it! Let! I need sleep 🤣
– FoxyFish
Mar 22 at 1:20
This is what i was trying to think of but couldnt think of it! Let! I need sleep 🤣
– FoxyFish
Mar 22 at 1:20
This is what i was trying to think of but couldnt think of it! Let! I need sleep 🤣
– FoxyFish
Mar 22 at 1:20
add a comment |
It's because the loop runs, then when you click on your buttons, j is equal to 10. Since your values are coming from the button's IDs, you can use that to your advantage:
var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert($(this).attr("id").split("btn-")[1]);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:01
Jack BashfordJack Bashford
15.5k31848
Perfect solution, thanks.
– FoxyFish
Mar 22 at 1:05
No problem whatsoever @FoxyFish - if my answer fixed your problem, please mark it as accepted by clicking the grey tick mark to the left of my answer.
– Jack Bashford
Mar 22 at 1:11
add a comment |
It's because the loop runs, then when you click on your buttons, j is equal to 10. Since your values are coming from the button's IDs, you can use that to your advantage:
var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert($(this).attr("id").split("btn-")[1]);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:01
Jack BashfordJack Bashford
15.5k31848
Perfect solution, thanks.
– FoxyFish
Mar 22 at 1:05
No problem whatsoever @FoxyFish - if my answer fixed your problem, please mark it as accepted by clicking the grey tick mark to the left of my answer.
– Jack Bashford
Mar 22 at 1:11
add a comment |
It's because the loop runs, then when you click on your buttons, j is equal to 10. Since your values are coming from the button's IDs, you can use that to your advantage:
var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert($(this).attr("id").split("btn-")[1]);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:01
Jack BashfordJack Bashford
15.5k31848
It's because the loop runs, then when you click on your buttons, j is equal to 10. Since your values are coming from the button's IDs, you can use that to your advantage:
var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert($(this).attr("id").split("btn-")[1]);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert($(this).attr("id").split("btn-")[1]);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>var j = 0;
for (j = 0; j < 10; j++)
$('#btn-' + j).click(function()
alert($(this).attr("id").split("btn-")[1]);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:01
Jack BashfordJack Bashford
15.5k31848
answered Mar 22 at 1:01
Jack BashfordJack Bashford
15.5k31848
answered Mar 22 at 1:01
Jack BashfordJack Bashford
15.5k31848
answered Mar 22 at 1:01
Jack BashfordJack Bashford
15.5k31848
15.5k31848
Perfect solution, thanks.
– FoxyFish
Mar 22 at 1:05
No problem whatsoever @FoxyFish - if my answer fixed your problem, please mark it as accepted by clicking the grey tick mark to the left of my answer.
– Jack Bashford
Mar 22 at 1:11
add a comment |
Perfect solution, thanks.
– FoxyFish
Mar 22 at 1:05
No problem whatsoever @FoxyFish - if my answer fixed your problem, please mark it as accepted by clicking the grey tick mark to the left of my answer.
– Jack Bashford
Mar 22 at 1:11
Perfect solution, thanks.
– FoxyFish
Mar 22 at 1:05
Perfect solution, thanks.
– FoxyFish
Mar 22 at 1:05
No problem whatsoever @FoxyFish - if my answer fixed your problem, please mark it as accepted by clicking the grey tick mark to the left of my answer.
– Jack Bashford
Mar 22 at 1:11
No problem whatsoever @FoxyFish - if my answer fixed your problem, please mark it as accepted by clicking the grey tick mark to the left of my answer.
– Jack Bashford
Mar 22 at 1:11
add a comment |
You can grab the id off of the current target element and parse out the index.
for (let index = 0; index < 4; index++)
$('#btn-' + index).click(function(e)
var value = parseInt(e.target.id.replace(/[D+]/g, ''), 10);
alert(value);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:03
Mr. PolywhirlMr. Polywhirl
17.6k85092
add a comment |
You can grab the id off of the current target element and parse out the index.
for (let index = 0; index < 4; index++)
$('#btn-' + index).click(function(e)
var value = parseInt(e.target.id.replace(/[D+]/g, ''), 10);
alert(value);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:03
Mr. PolywhirlMr. Polywhirl
17.6k85092
add a comment |
You can grab the id off of the current target element and parse out the index.
for (let index = 0; index < 4; index++)
$('#btn-' + index).click(function(e)
var value = parseInt(e.target.id.replace(/[D+]/g, ''), 10);
alert(value);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:03
Mr. PolywhirlMr. Polywhirl
17.6k85092
You can grab the id off of the current target element and parse out the index.
for (let index = 0; index < 4; index++)
$('#btn-' + index).click(function(e)
var value = parseInt(e.target.id.replace(/[D+]/g, ''), 10);
alert(value);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>for (let index = 0; index < 4; index++)
$('#btn-' + index).click(function(e)
var value = parseInt(e.target.id.replace(/[D+]/g, ''), 10);
alert(value);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>for (let index = 0; index < 4; index++)
$('#btn-' + index).click(function(e)
var value = parseInt(e.target.id.replace(/[D+]/g, ''), 10);
alert(value);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:03
Mr. PolywhirlMr. Polywhirl
17.6k85092
answered Mar 22 at 1:03
Mr. PolywhirlMr. Polywhirl
17.6k85092
answered Mar 22 at 1:03
Mr. PolywhirlMr. Polywhirl
17.6k85092
answered Mar 22 at 1:03
Mr. PolywhirlMr. Polywhirl
17.6k85092
17.6k85092
add a comment |
add a comment |
If you do the event binding in a function you get a closure keeping the value.
var j = 0;
for (j = 0; j < 10; j++)
addClick(j);
function addClick(j)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:05
Adrian BrandAdrian Brand
4,85121124
add a comment |
If you do the event binding in a function you get a closure keeping the value.
var j = 0;
for (j = 0; j < 10; j++)
addClick(j);
function addClick(j)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:05
Adrian BrandAdrian Brand
4,85121124
add a comment |
If you do the event binding in a function you get a closure keeping the value.
var j = 0;
for (j = 0; j < 10; j++)
addClick(j);
function addClick(j)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:05
Adrian BrandAdrian Brand
4,85121124
If you do the event binding in a function you get a closure keeping the value.
var j = 0;
for (j = 0; j < 10; j++)
addClick(j);
function addClick(j)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>var j = 0;
for (j = 0; j < 10; j++)
addClick(j);
function addClick(j)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>var j = 0;
for (j = 0; j < 10; j++)
addClick(j);
function addClick(j)
$('#btn-' + j).click(function()
alert(j);
);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>answered Mar 22 at 1:05
Adrian BrandAdrian Brand
4,85121124
answered Mar 22 at 1:05
Adrian BrandAdrian Brand
4,85121124
answered Mar 22 at 1:05
Adrian BrandAdrian Brand
4,85121124
answered Mar 22 at 1:05
Adrian BrandAdrian Brand
4,85121124
4,85121124
add a comment |
add a comment |
Try this,
$( "button[id^=btn]" ).each(function(index)
$(this).on("click", function()
var idvalue = $(this).attr('id');
//alert(index);
//or
idvalue = idvalue.replace("btn-","");
alert(idvalue);
);
);
answered Mar 22 at 1:13
MyHealingLifeMyHealingLife
54
add a comment |
Try this,
$( "button[id^=btn]" ).each(function(index)
$(this).on("click", function()
var idvalue = $(this).attr('id');
//alert(index);
//or
idvalue = idvalue.replace("btn-","");
alert(idvalue);
);
);
answered Mar 22 at 1:13
MyHealingLifeMyHealingLife
54
add a comment |
Try this,
$( "button[id^=btn]" ).each(function(index)
$(this).on("click", function()
var idvalue = $(this).attr('id');
//alert(index);
//or
idvalue = idvalue.replace("btn-","");
alert(idvalue);
);
);
answered Mar 22 at 1:13
MyHealingLifeMyHealingLife
54
Try this,
$( "button[id^=btn]" ).each(function(index)
$(this).on("click", function()
var idvalue = $(this).attr('id');
//alert(index);
//or
idvalue = idvalue.replace("btn-","");
alert(idvalue);
);
);
answered Mar 22 at 1:13
MyHealingLifeMyHealingLife
54
answered Mar 22 at 1:13
MyHealingLifeMyHealingLife
54
answered Mar 22 at 1:13
MyHealingLifeMyHealingLife
54
answered Mar 22 at 1:13
MyHealingLifeMyHealingLife
54
54
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55291387%2flooping-a-button-click-event-in-jquery%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
Possible duplicate of JavaScript closure inside loops – simple practical example
– Ivar
Mar 22 at 1:01