How to select element after it was added to DOM
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
On my HTML I have buttons list and text input field. Input field is to add extra buttons to my buttons list.
On jQuery I have eventListener when one of these buttons with .choices is clicked console log its value.
It works fine without any errors. But when I add extra button to my list with same class (.choices) new button appears but it doesn't respond to my click.
Any suggestions?
<div class="buttons">
<button id="button0" class="choices">Running</button>
<button id="button1" class="choices">Yoga</button>
<button id="button2" class="choices">Karate</button>
</div>
JS
$("#add-button").click(function(){
var inputValue = $("#add-input").val();
var generatedId = "button" + healthyChoices.length;
healthyChoices.push(inputValue);
$("<button>").attr("id", generatedId).appendTo(".buttons");
$("#" + generatedId).attr("value", inputValue);
$("#" + generatedId).attr("class", "choices");
$("#" + generatedId).text(inputValue);
$("#add-input").val("");
});
$(".choices").click(function(){
var selectedGroup = $(this).val();
console.log(selectedGroup);
});
javascript jquery
|
show 1 more comment
On my HTML I have buttons list and text input field. Input field is to add extra buttons to my buttons list.
On jQuery I have eventListener when one of these buttons with .choices is clicked console log its value.
It works fine without any errors. But when I add extra button to my list with same class (.choices) new button appears but it doesn't respond to my click.
Any suggestions?
<div class="buttons">
<button id="button0" class="choices">Running</button>
<button id="button1" class="choices">Yoga</button>
<button id="button2" class="choices">Karate</button>
</div>
JS
$("#add-button").click(function(){
var inputValue = $("#add-input").val();
var generatedId = "button" + healthyChoices.length;
healthyChoices.push(inputValue);
$("<button>").attr("id", generatedId).appendTo(".buttons");
$("#" + generatedId).attr("value", inputValue);
$("#" + generatedId).attr("class", "choices");
$("#" + generatedId).text(inputValue);
$("#add-input").val("");
});
$(".choices").click(function(){
var selectedGroup = $(this).val();
console.log(selectedGroup);
});
javascript jquery
3
$(".buttons").on('click', '.choices', function() {
– dfsq
Jan 3 at 21:56
The comment @dfsq posted is how I'd do it, but I'd suggest further that they make it an answer with an explanation as to why that binds the event differently than what the OP posted. for points. =)
– Nikki9696
Jan 3 at 21:59
If you do this:newbutton = $("<button>"), you can donewbutton.attr("value", inputValue), etc without having to generate IDs, since you don't seem to be using them.,
– Diodeus - James MacFarlane
Jan 3 at 22:02
3
Possible duplicate of Event binding on dynamically created elements?
– Taplar
Jan 3 at 22:05
For performance reasons, I would advise you to avoid$("#" + generatedId).method()calls repeatedly like you are doing.var $newButton = $('<button>');, alter the button, then append it. Don't repeat unnecessary lookups.
– Taplar
Jan 3 at 22:06
|
show 1 more comment
On my HTML I have buttons list and text input field. Input field is to add extra buttons to my buttons list.
On jQuery I have eventListener when one of these buttons with .choices is clicked console log its value.
It works fine without any errors. But when I add extra button to my list with same class (.choices) new button appears but it doesn't respond to my click.
Any suggestions?
<div class="buttons">
<button id="button0" class="choices">Running</button>
<button id="button1" class="choices">Yoga</button>
<button id="button2" class="choices">Karate</button>
</div>
JS
$("#add-button").click(function(){
var inputValue = $("#add-input").val();
var generatedId = "button" + healthyChoices.length;
healthyChoices.push(inputValue);
$("<button>").attr("id", generatedId).appendTo(".buttons");
$("#" + generatedId).attr("value", inputValue);
$("#" + generatedId).attr("class", "choices");
$("#" + generatedId).text(inputValue);
$("#add-input").val("");
});
$(".choices").click(function(){
var selectedGroup = $(this).val();
console.log(selectedGroup);
});
javascript jquery
On my HTML I have buttons list and text input field. Input field is to add extra buttons to my buttons list.
On jQuery I have eventListener when one of these buttons with .choices is clicked console log its value.
It works fine without any errors. But when I add extra button to my list with same class (.choices) new button appears but it doesn't respond to my click.
Any suggestions?
<div class="buttons">
<button id="button0" class="choices">Running</button>
<button id="button1" class="choices">Yoga</button>
<button id="button2" class="choices">Karate</button>
</div>
JS
$("#add-button").click(function(){
var inputValue = $("#add-input").val();
var generatedId = "button" + healthyChoices.length;
healthyChoices.push(inputValue);
$("<button>").attr("id", generatedId).appendTo(".buttons");
$("#" + generatedId).attr("value", inputValue);
$("#" + generatedId).attr("class", "choices");
$("#" + generatedId).text(inputValue);
$("#add-input").val("");
});
$(".choices").click(function(){
var selectedGroup = $(this).val();
console.log(selectedGroup);
});
javascript jquery
javascript jquery
asked Jan 3 at 21:53
user10746954
3
$(".buttons").on('click', '.choices', function() {
– dfsq
Jan 3 at 21:56
The comment @dfsq posted is how I'd do it, but I'd suggest further that they make it an answer with an explanation as to why that binds the event differently than what the OP posted. for points. =)
– Nikki9696
Jan 3 at 21:59
If you do this:newbutton = $("<button>"), you can donewbutton.attr("value", inputValue), etc without having to generate IDs, since you don't seem to be using them.,
– Diodeus - James MacFarlane
Jan 3 at 22:02
3
Possible duplicate of Event binding on dynamically created elements?
– Taplar
Jan 3 at 22:05
For performance reasons, I would advise you to avoid$("#" + generatedId).method()calls repeatedly like you are doing.var $newButton = $('<button>');, alter the button, then append it. Don't repeat unnecessary lookups.
– Taplar
Jan 3 at 22:06
|
show 1 more comment
3
$(".buttons").on('click', '.choices', function() {
– dfsq
Jan 3 at 21:56
The comment @dfsq posted is how I'd do it, but I'd suggest further that they make it an answer with an explanation as to why that binds the event differently than what the OP posted. for points. =)
– Nikki9696
Jan 3 at 21:59
If you do this:newbutton = $("<button>"), you can donewbutton.attr("value", inputValue), etc without having to generate IDs, since you don't seem to be using them.,
– Diodeus - James MacFarlane
Jan 3 at 22:02
3
Possible duplicate of Event binding on dynamically created elements?
– Taplar
Jan 3 at 22:05
For performance reasons, I would advise you to avoid$("#" + generatedId).method()calls repeatedly like you are doing.var $newButton = $('<button>');, alter the button, then append it. Don't repeat unnecessary lookups.
– Taplar
Jan 3 at 22:06
3
3
$(".buttons").on('click', '.choices', function() {– dfsq
Jan 3 at 21:56
$(".buttons").on('click', '.choices', function() {– dfsq
Jan 3 at 21:56
The comment @dfsq posted is how I'd do it, but I'd suggest further that they make it an answer with an explanation as to why that binds the event differently than what the OP posted. for points. =)
– Nikki9696
Jan 3 at 21:59
The comment @dfsq posted is how I'd do it, but I'd suggest further that they make it an answer with an explanation as to why that binds the event differently than what the OP posted. for points. =)
– Nikki9696
Jan 3 at 21:59
If you do this:
newbutton = $("<button>"), you can do newbutton.attr("value", inputValue), etc without having to generate IDs, since you don't seem to be using them.,– Diodeus - James MacFarlane
Jan 3 at 22:02
If you do this:
newbutton = $("<button>"), you can do newbutton.attr("value", inputValue), etc without having to generate IDs, since you don't seem to be using them.,– Diodeus - James MacFarlane
Jan 3 at 22:02
3
3
Possible duplicate of Event binding on dynamically created elements?
– Taplar
Jan 3 at 22:05
Possible duplicate of Event binding on dynamically created elements?
– Taplar
Jan 3 at 22:05
For performance reasons, I would advise you to avoid
$("#" + generatedId).method() calls repeatedly like you are doing. var $newButton = $('<button>');, alter the button, then append it. Don't repeat unnecessary lookups.– Taplar
Jan 3 at 22:06
For performance reasons, I would advise you to avoid
$("#" + generatedId).method() calls repeatedly like you are doing. var $newButton = $('<button>');, alter the button, then append it. Don't repeat unnecessary lookups.– Taplar
Jan 3 at 22:06
|
show 1 more comment
1 Answer
1
active
oldest
votes
The .click method does not handle elements dynamically added to the DOM. You should be using the .on method (as indicated by dfsq's comment).
See this SO post: Difference between .on('click') vs .click()
answered Jan 3 at 22:06
Sean MurphySean Murphy
45615
Or vote to close as a duplicate.
– Taplar
Jan 3 at 22:07
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%2f54030323%2fhow-to-select-element-after-it-was-added-to-dom%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The .click method does not handle elements dynamically added to the DOM. You should be using the .on method (as indicated by dfsq's comment).
See this SO post: Difference between .on('click') vs .click()
answered Jan 3 at 22:06
Sean MurphySean Murphy
45615
Or vote to close as a duplicate.
– Taplar
Jan 3 at 22:07
add a comment |
The .click method does not handle elements dynamically added to the DOM. You should be using the .on method (as indicated by dfsq's comment).
See this SO post: Difference between .on('click') vs .click()
answered Jan 3 at 22:06
Sean MurphySean Murphy
45615
Or vote to close as a duplicate.
– Taplar
Jan 3 at 22:07
add a comment |
The .click method does not handle elements dynamically added to the DOM. You should be using the .on method (as indicated by dfsq's comment).
See this SO post: Difference between .on('click') vs .click()
answered Jan 3 at 22:06
Sean MurphySean Murphy
45615
The .click method does not handle elements dynamically added to the DOM. You should be using the .on method (as indicated by dfsq's comment).
See this SO post: Difference between .on('click') vs .click()
answered Jan 3 at 22:06
Sean MurphySean Murphy
45615
answered Jan 3 at 22:06
Sean MurphySean Murphy
45615
answered Jan 3 at 22:06
Sean MurphySean Murphy
45615
answered Jan 3 at 22:06
Sean MurphySean Murphy
45615
45615
Or vote to close as a duplicate.
– Taplar
Jan 3 at 22:07
add a comment |
Or vote to close as a duplicate.
– Taplar
Jan 3 at 22:07
Or vote to close as a duplicate.
– Taplar
Jan 3 at 22:07
Or vote to close as a duplicate.
– Taplar
Jan 3 at 22:07
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%2f54030323%2fhow-to-select-element-after-it-was-added-to-dom%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
$(".buttons").on('click', '.choices', function() {– dfsq
Jan 3 at 21:56
The comment @dfsq posted is how I'd do it, but I'd suggest further that they make it an answer with an explanation as to why that binds the event differently than what the OP posted. for points. =)
– Nikki9696
Jan 3 at 21:59
If you do this:
newbutton = $("<button>"), you can donewbutton.attr("value", inputValue), etc without having to generate IDs, since you don't seem to be using them.,– Diodeus - James MacFarlane
Jan 3 at 22:02
3
Possible duplicate of Event binding on dynamically created elements?
– Taplar
Jan 3 at 22:05
For performance reasons, I would advise you to avoid
$("#" + generatedId).method()calls repeatedly like you are doing.var $newButton = $('<button>');, alter the button, then append it. Don't repeat unnecessary lookups.– Taplar
Jan 3 at 22:06