Adding click to jquery created dynamic ajax buttons doesn't work
0
I have written code in javascript the function searchCompany queries the database and adds a list of applicant_original and corresponding buttons to select them. The list and the buttons are created and visible in the UI but the event handler is unable to be attached to the button.
function searchCompany()
$("#search-result").html('');
let res = ;
let name = $("#company_name").val();
$.ajax(
url: `http://localhost:5000/manualharmonization/query?name=$name`,
success: function (data)
data.map((el, i) =>
$("#search-result")
.append(`<tr class="list-item"><td>$el.applicant_original</td>
<td class="elem-button"><button class="button" id="$i"type="button">Select</button></td>
</tr>`);
);
,
error: function (e)
console.log(e);
alert(JSON.stringify(e));
);
$("#search-company").click(searchCompany);
(function addClick()
$("tr").map(i =>
$(`#i`).click(function ()
console.log("clicked");
)
)
)();
The addClick function is not working. No button having id=i logs when clicked.
jquery ajax
asked Nov 13 '18 at 6:33
Harshdeep KanhaiHarshdeep Kanhai
84
|
show 2 more comments
0
I have written code in javascript the function searchCompany queries the database and adds a list of applicant_original and corresponding buttons to select them. The list and the buttons are created and visible in the UI but the event handler is unable to be attached to the button.
function searchCompany()
$("#search-result").html('');
let res = ;
let name = $("#company_name").val();
$.ajax(
url: `http://localhost:5000/manualharmonization/query?name=$name`,
success: function (data)
data.map((el, i) =>
$("#search-result")
.append(`<tr class="list-item"><td>$el.applicant_original</td>
<td class="elem-button"><button class="button" id="$i"type="button">Select</button></td>
</tr>`);
);
,
error: function (e)
console.log(e);
alert(JSON.stringify(e));
);
$("#search-company").click(searchCompany);
(function addClick()
$("tr").map(i =>
$(`#i`).click(function ()
console.log("clicked");
)
)
)();
The addClick function is not working. No button having id=i logs when clicked.
jquery ajax
asked Nov 13 '18 at 6:33
Harshdeep KanhaiHarshdeep Kanhai
84
since you add those element dynamically use event delegation use.on()and bind the event on an element hat is static on load good example to look
– guradio
Nov 13 '18 at 6:34
Possible duplicate of jQuery .live() vs .on() method for adding a click event after loading dynamic html
– Nandita Arora Sharma
Nov 13 '18 at 6:37
also additional suggestion use class instead of ID to make it easier for you to create the click event use this context to determine the click element.
– guradio
Nov 13 '18 at 6:40
I changedaddClickto follows
– Harshdeep Kanhai
Nov 13 '18 at 6:41
Possible duplicate of What is DOM Event delegation?
– guradio
Nov 13 '18 at 6:41
|
show 2 more comments
0
0
0
I have written code in javascript the function searchCompany queries the database and adds a list of applicant_original and corresponding buttons to select them. The list and the buttons are created and visible in the UI but the event handler is unable to be attached to the button.
function searchCompany()
$("#search-result").html('');
let res = ;
let name = $("#company_name").val();
$.ajax(
url: `http://localhost:5000/manualharmonization/query?name=$name`,
success: function (data)
data.map((el, i) =>
$("#search-result")
.append(`<tr class="list-item"><td>$el.applicant_original</td>
<td class="elem-button"><button class="button" id="$i"type="button">Select</button></td>
</tr>`);
);
,
error: function (e)
console.log(e);
alert(JSON.stringify(e));
);
$("#search-company").click(searchCompany);
(function addClick()
$("tr").map(i =>
$(`#i`).click(function ()
console.log("clicked");
)
)
)();
The addClick function is not working. No button having id=i logs when clicked.
jquery ajax
asked Nov 13 '18 at 6:33
Harshdeep KanhaiHarshdeep Kanhai
84
I have written code in javascript the function searchCompany queries the database and adds a list of applicant_original and corresponding buttons to select them. The list and the buttons are created and visible in the UI but the event handler is unable to be attached to the button.
function searchCompany()
$("#search-result").html('');
let res = ;
let name = $("#company_name").val();
$.ajax(
url: `http://localhost:5000/manualharmonization/query?name=$name`,
success: function (data)
data.map((el, i) =>
$("#search-result")
.append(`<tr class="list-item"><td>$el.applicant_original</td>
<td class="elem-button"><button class="button" id="$i"type="button">Select</button></td>
</tr>`);
);
,
error: function (e)
console.log(e);
alert(JSON.stringify(e));
);
$("#search-company").click(searchCompany);
(function addClick()
$("tr").map(i =>
$(`#i`).click(function ()
console.log("clicked");
)
)
)();
The addClick function is not working. No button having id=i logs when clicked.
jquery ajax
jquery ajax
asked Nov 13 '18 at 6:33
Harshdeep KanhaiHarshdeep Kanhai
84
asked Nov 13 '18 at 6:33
Harshdeep KanhaiHarshdeep Kanhai
84
asked Nov 13 '18 at 6:33
Harshdeep KanhaiHarshdeep Kanhai
84
asked Nov 13 '18 at 6:33
Harshdeep KanhaiHarshdeep Kanhai
84
asked Nov 13 '18 at 6:33
Harshdeep KanhaiHarshdeep Kanhai
84
84
since you add those element dynamically use event delegation use.on()and bind the event on an element hat is static on load good example to look
– guradio
Nov 13 '18 at 6:34
Possible duplicate of jQuery .live() vs .on() method for adding a click event after loading dynamic html
– Nandita Arora Sharma
Nov 13 '18 at 6:37
also additional suggestion use class instead of ID to make it easier for you to create the click event use this context to determine the click element.
– guradio
Nov 13 '18 at 6:40
I changedaddClickto follows
– Harshdeep Kanhai
Nov 13 '18 at 6:41
Possible duplicate of What is DOM Event delegation?
– guradio
Nov 13 '18 at 6:41
|
show 2 more comments
since you add those element dynamically use event delegation use.on()and bind the event on an element hat is static on load good example to look
– guradio
Nov 13 '18 at 6:34
Possible duplicate of jQuery .live() vs .on() method for adding a click event after loading dynamic html
– Nandita Arora Sharma
Nov 13 '18 at 6:37
also additional suggestion use class instead of ID to make it easier for you to create the click event use this context to determine the click element.
– guradio
Nov 13 '18 at 6:40
I changedaddClickto follows
– Harshdeep Kanhai
Nov 13 '18 at 6:41
Possible duplicate of What is DOM Event delegation?
– guradio
Nov 13 '18 at 6:41
since you add those element dynamically use event delegation use
.on() and bind the event on an element hat is static on load good example to look– guradio
Nov 13 '18 at 6:34
since you add those element dynamically use event delegation use
.on() and bind the event on an element hat is static on load good example to look– guradio
Nov 13 '18 at 6:34
Possible duplicate of jQuery .live() vs .on() method for adding a click event after loading dynamic html
– Nandita Arora Sharma
Nov 13 '18 at 6:37
Possible duplicate of jQuery .live() vs .on() method for adding a click event after loading dynamic html
– Nandita Arora Sharma
Nov 13 '18 at 6:37
also additional suggestion use class instead of ID to make it easier for you to create the click event use this context to determine the click element.
– guradio
Nov 13 '18 at 6:40
also additional suggestion use class instead of ID to make it easier for you to create the click event use this context to determine the click element.
– guradio
Nov 13 '18 at 6:40
I changed
addClick to follows– Harshdeep Kanhai
Nov 13 '18 at 6:41
I changed
addClick to follows– Harshdeep Kanhai
Nov 13 '18 at 6:41
Possible duplicate of What is DOM Event delegation?
– guradio
Nov 13 '18 at 6:41
Possible duplicate of What is DOM Event delegation?
– guradio
Nov 13 '18 at 6:41
|
show 2 more comments
1 Answer
1
active
oldest
votes
0
You can do it by the following way.
function searchCompany()
$("#search-result").html('');
let res = ;
let name = $("#company_name").val();
$.ajax(
url: `http://localhost:5000/manualharmonization/query?name=$name`,
success: function (data)
data.map((el, i) =>
$("#search-result")
.append(`<tr class="list-item"><td>$el.applicant_original</td>
<td class="elem-button"><button class="button" id="$i"type="button">Select</button></td>
</tr>`);
SuccessEvents(); // Add events to this functions
)
error: function (e)
console.log(e);
alert(JSON.stringify(e));
)
$("#search-company").click(searchCompany);
function SuccessEvents()
(function addClick()
$("tr").map(i =>
$(`#i`).click(function ()
console.log("clicked");
)
)
)()
answered Nov 14 '18 at 12:45
J.JaiJ.Jai
395
This may be the answer, but adding an explanation would greatly increase the quality of your answer. What did you do, and why do you think it will help? Explain your answer, so future visitors of all skill levels can learn from it. Code-only answers are considered low quality on SO.
– Don't Panic
Nov 14 '18 at 15:14
This doesn't work I tried it already.
– Harshdeep Kanhai
Nov 15 '18 at 10:53
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
);
);
draft saved
draft discarded
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%2f53275102%2fadding-click-to-jquery-created-dynamic-ajax-buttons-doesnt-work%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
0
You can do it by the following way.
function searchCompany()
$("#search-result").html('');
let res = ;
let name = $("#company_name").val();
$.ajax(
url: `http://localhost:5000/manualharmonization/query?name=$name`,
success: function (data)
data.map((el, i) =>
$("#search-result")
.append(`<tr class="list-item"><td>$el.applicant_original</td>
<td class="elem-button"><button class="button" id="$i"type="button">Select</button></td>
</tr>`);
SuccessEvents(); // Add events to this functions
)
error: function (e)
console.log(e);
alert(JSON.stringify(e));
)
$("#search-company").click(searchCompany);
function SuccessEvents()
(function addClick()
$("tr").map(i =>
$(`#i`).click(function ()
console.log("clicked");
)
)
)()
answered Nov 14 '18 at 12:45
J.JaiJ.Jai
395
This may be the answer, but adding an explanation would greatly increase the quality of your answer. What did you do, and why do you think it will help? Explain your answer, so future visitors of all skill levels can learn from it. Code-only answers are considered low quality on SO.
– Don't Panic
Nov 14 '18 at 15:14
This doesn't work I tried it already.
– Harshdeep Kanhai
Nov 15 '18 at 10:53
add a comment |
0
You can do it by the following way.
function searchCompany()
$("#search-result").html('');
let res = ;
let name = $("#company_name").val();
$.ajax(
url: `http://localhost:5000/manualharmonization/query?name=$name`,
success: function (data)
data.map((el, i) =>
$("#search-result")
.append(`<tr class="list-item"><td>$el.applicant_original</td>
<td class="elem-button"><button class="button" id="$i"type="button">Select</button></td>
</tr>`);
SuccessEvents(); // Add events to this functions
)
error: function (e)
console.log(e);
alert(JSON.stringify(e));
)
$("#search-company").click(searchCompany);
function SuccessEvents()
(function addClick()
$("tr").map(i =>
$(`#i`).click(function ()
console.log("clicked");
)
)
)()
answered Nov 14 '18 at 12:45
J.JaiJ.Jai
395
This may be the answer, but adding an explanation would greatly increase the quality of your answer. What did you do, and why do you think it will help? Explain your answer, so future visitors of all skill levels can learn from it. Code-only answers are considered low quality on SO.
– Don't Panic
Nov 14 '18 at 15:14
This doesn't work I tried it already.
– Harshdeep Kanhai
Nov 15 '18 at 10:53
add a comment |
0
0
0
You can do it by the following way.
function searchCompany()
$("#search-result").html('');
let res = ;
let name = $("#company_name").val();
$.ajax(
url: `http://localhost:5000/manualharmonization/query?name=$name`,
success: function (data)
data.map((el, i) =>
$("#search-result")
.append(`<tr class="list-item"><td>$el.applicant_original</td>
<td class="elem-button"><button class="button" id="$i"type="button">Select</button></td>
</tr>`);
SuccessEvents(); // Add events to this functions
)
error: function (e)
console.log(e);
alert(JSON.stringify(e));
)
$("#search-company").click(searchCompany);
function SuccessEvents()
(function addClick()
$("tr").map(i =>
$(`#i`).click(function ()
console.log("clicked");
)
)
)()
answered Nov 14 '18 at 12:45
J.JaiJ.Jai
395
You can do it by the following way.
function searchCompany()
$("#search-result").html('');
let res = ;
let name = $("#company_name").val();
$.ajax(
url: `http://localhost:5000/manualharmonization/query?name=$name`,
success: function (data)
data.map((el, i) =>
$("#search-result")
.append(`<tr class="list-item"><td>$el.applicant_original</td>
<td class="elem-button"><button class="button" id="$i"type="button">Select</button></td>
</tr>`);
SuccessEvents(); // Add events to this functions
)
error: function (e)
console.log(e);
alert(JSON.stringify(e));
)
$("#search-company").click(searchCompany);
function SuccessEvents()
(function addClick()
$("tr").map(i =>
$(`#i`).click(function ()
console.log("clicked");
)
)
)()
answered Nov 14 '18 at 12:45
J.JaiJ.Jai
395
edited Nov 15 '18 at 5:51
answered Nov 14 '18 at 12:45
J.JaiJ.Jai
395
answered Nov 14 '18 at 12:45
J.JaiJ.Jai
395
answered Nov 14 '18 at 12:45
J.JaiJ.Jai
395
395
This may be the answer, but adding an explanation would greatly increase the quality of your answer. What did you do, and why do you think it will help? Explain your answer, so future visitors of all skill levels can learn from it. Code-only answers are considered low quality on SO.
– Don't Panic
Nov 14 '18 at 15:14
This doesn't work I tried it already.
– Harshdeep Kanhai
Nov 15 '18 at 10:53
add a comment |
This may be the answer, but adding an explanation would greatly increase the quality of your answer. What did you do, and why do you think it will help? Explain your answer, so future visitors of all skill levels can learn from it. Code-only answers are considered low quality on SO.
– Don't Panic
Nov 14 '18 at 15:14
This doesn't work I tried it already.
– Harshdeep Kanhai
Nov 15 '18 at 10:53
This may be the answer, but adding an explanation would greatly increase the quality of your answer. What did you do, and why do you think it will help? Explain your answer, so future visitors of all skill levels can learn from it. Code-only answers are considered low quality on SO.
– Don't Panic
Nov 14 '18 at 15:14
This may be the answer, but adding an explanation would greatly increase the quality of your answer. What did you do, and why do you think it will help? Explain your answer, so future visitors of all skill levels can learn from it. Code-only answers are considered low quality on SO.
– Don't Panic
Nov 14 '18 at 15:14
This doesn't work I tried it already.
– Harshdeep Kanhai
Nov 15 '18 at 10:53
This doesn't work I tried it already.
– Harshdeep Kanhai
Nov 15 '18 at 10:53
add a comment |
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53275102%2fadding-click-to-jquery-created-dynamic-ajax-buttons-doesnt-work%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
since you add those element dynamically use event delegation use
.on()and bind the event on an element hat is static on load good example to look– guradio
Nov 13 '18 at 6:34
Possible duplicate of jQuery .live() vs .on() method for adding a click event after loading dynamic html
– Nandita Arora Sharma
Nov 13 '18 at 6:37
also additional suggestion use class instead of ID to make it easier for you to create the click event use this context to determine the click element.
– guradio
Nov 13 '18 at 6:40
I changed
addClickto follows– Harshdeep Kanhai
Nov 13 '18 at 6:41
Possible duplicate of What is DOM Event delegation?
– guradio
Nov 13 '18 at 6:41