jquery table field doesn't work after editing on 4th time
0
The problem is here is that when I add a user and edit it it works till my 4th attempt. After that gets stuck and doesn't work. What could be the reason? This is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Add Table Rows</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table id="tablo">
<thead>
<tr>
<th id="tab">Name</th>
<td>
<input style="background-color:green; color: white; width: 103px" type="button" class="add" value="Əlavə+">
</td>
</tr>
<tr hidden id="td">
<td>
<input type="text" style='width:250px' id="name">
</td>
<td>
<span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>
</td>
</tr>
</thead>
<tbody><tr></tr></tbody>
</table>
And this is my JavaScript:
<script>
$(document).ready(function()
$(".add").click(function()
$("#td").show('');
);
$(".save").click(function()
var name = $("#name").val();
var toplam = "<tr><td style='width:250px'>" + name + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$("table tbody").append(toplam);
var name = $("#name").val('');
$('body').on('click', '.delete', function()
$(this).parents('tr').remove();
);
$("#td").hide();
);
$('body').on('click', '.edit', function()
var one = $(this).closest('tr').find('td:eq(0)').text();
var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";
$(this).parents('tr').html(edit);
$(".save").click(function()
var value = $("#text2").val();
var save= "<td style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$(this).parents('tr').html(save);
);
);
);
</script>
And some css style which is not an obligatory to put. The main problem is that the code is actually works after editing for a couple of times. It stops to add a en empty field after 5-6 attemts, could you look at my code if there is a problem?
javascript jquery frontend development-environment
edited Nov 14 '18 at 12:39
YakovL
3,042102541
asked Nov 12 '18 at 12:23
AmirAmir
51
add a comment |
0
The problem is here is that when I add a user and edit it it works till my 4th attempt. After that gets stuck and doesn't work. What could be the reason? This is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Add Table Rows</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table id="tablo">
<thead>
<tr>
<th id="tab">Name</th>
<td>
<input style="background-color:green; color: white; width: 103px" type="button" class="add" value="Əlavə+">
</td>
</tr>
<tr hidden id="td">
<td>
<input type="text" style='width:250px' id="name">
</td>
<td>
<span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>
</td>
</tr>
</thead>
<tbody><tr></tr></tbody>
</table>
And this is my JavaScript:
<script>
$(document).ready(function()
$(".add").click(function()
$("#td").show('');
);
$(".save").click(function()
var name = $("#name").val();
var toplam = "<tr><td style='width:250px'>" + name + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$("table tbody").append(toplam);
var name = $("#name").val('');
$('body').on('click', '.delete', function()
$(this).parents('tr').remove();
);
$("#td").hide();
);
$('body').on('click', '.edit', function()
var one = $(this).closest('tr').find('td:eq(0)').text();
var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";
$(this).parents('tr').html(edit);
$(".save").click(function()
var value = $("#text2").val();
var save= "<td style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$(this).parents('tr').html(save);
);
);
);
</script>
And some css style which is not an obligatory to put. The main problem is that the code is actually works after editing for a couple of times. It stops to add a en empty field after 5-6 attemts, could you look at my code if there is a problem?
javascript jquery frontend development-environment
edited Nov 14 '18 at 12:39
YakovL
3,042102541
asked Nov 12 '18 at 12:23
AmirAmir
51
Please consider creating an SO snippet and may be minimizing the code further (see Minimal, Complete, and Verifiable example). Best regards
– YakovL
Nov 14 '18 at 12:44
add a comment |
0
0
0
The problem is here is that when I add a user and edit it it works till my 4th attempt. After that gets stuck and doesn't work. What could be the reason? This is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Add Table Rows</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table id="tablo">
<thead>
<tr>
<th id="tab">Name</th>
<td>
<input style="background-color:green; color: white; width: 103px" type="button" class="add" value="Əlavə+">
</td>
</tr>
<tr hidden id="td">
<td>
<input type="text" style='width:250px' id="name">
</td>
<td>
<span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>
</td>
</tr>
</thead>
<tbody><tr></tr></tbody>
</table>
And this is my JavaScript:
<script>
$(document).ready(function()
$(".add").click(function()
$("#td").show('');
);
$(".save").click(function()
var name = $("#name").val();
var toplam = "<tr><td style='width:250px'>" + name + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$("table tbody").append(toplam);
var name = $("#name").val('');
$('body').on('click', '.delete', function()
$(this).parents('tr').remove();
);
$("#td").hide();
);
$('body').on('click', '.edit', function()
var one = $(this).closest('tr').find('td:eq(0)').text();
var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";
$(this).parents('tr').html(edit);
$(".save").click(function()
var value = $("#text2").val();
var save= "<td style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$(this).parents('tr').html(save);
);
);
);
</script>
And some css style which is not an obligatory to put. The main problem is that the code is actually works after editing for a couple of times. It stops to add a en empty field after 5-6 attemts, could you look at my code if there is a problem?
javascript jquery frontend development-environment
edited Nov 14 '18 at 12:39
YakovL
3,042102541
asked Nov 12 '18 at 12:23
AmirAmir
51
The problem is here is that when I add a user and edit it it works till my 4th attempt. After that gets stuck and doesn't work. What could be the reason? This is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Add Table Rows</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table id="tablo">
<thead>
<tr>
<th id="tab">Name</th>
<td>
<input style="background-color:green; color: white; width: 103px" type="button" class="add" value="Əlavə+">
</td>
</tr>
<tr hidden id="td">
<td>
<input type="text" style='width:250px' id="name">
</td>
<td>
<span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>
</td>
</tr>
</thead>
<tbody><tr></tr></tbody>
</table>
And this is my JavaScript:
<script>
$(document).ready(function()
$(".add").click(function()
$("#td").show('');
);
$(".save").click(function()
var name = $("#name").val();
var toplam = "<tr><td style='width:250px'>" + name + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$("table tbody").append(toplam);
var name = $("#name").val('');
$('body').on('click', '.delete', function()
$(this).parents('tr').remove();
);
$("#td").hide();
);
$('body').on('click', '.edit', function()
var one = $(this).closest('tr').find('td:eq(0)').text();
var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";
$(this).parents('tr').html(edit);
$(".save").click(function()
var value = $("#text2").val();
var save= "<td style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$(this).parents('tr').html(save);
);
);
);
</script>
And some css style which is not an obligatory to put. The main problem is that the code is actually works after editing for a couple of times. It stops to add a en empty field after 5-6 attemts, could you look at my code if there is a problem?
javascript jquery frontend development-environment
javascript jquery frontend development-environment
edited Nov 14 '18 at 12:39
YakovL
3,042102541
asked Nov 12 '18 at 12:23
AmirAmir
51
edited Nov 14 '18 at 12:39
YakovL
3,042102541
asked Nov 12 '18 at 12:23
AmirAmir
51
edited Nov 14 '18 at 12:39
YakovL
3,042102541
edited Nov 14 '18 at 12:39
YakovL
3,042102541
edited Nov 14 '18 at 12:39
YakovL
3,042102541
3,042102541
asked Nov 12 '18 at 12:23
AmirAmir
51
asked Nov 12 '18 at 12:23
AmirAmir
51
asked Nov 12 '18 at 12:23
AmirAmir
51
51
Please consider creating an SO snippet and may be minimizing the code further (see Minimal, Complete, and Verifiable example). Best regards
– YakovL
Nov 14 '18 at 12:44
add a comment |
Please consider creating an SO snippet and may be minimizing the code further (see Minimal, Complete, and Verifiable example). Best regards
– YakovL
Nov 14 '18 at 12:44
Please consider creating an SO snippet and may be minimizing the code further (see Minimal, Complete, and Verifiable example). Best regards
– YakovL
Nov 14 '18 at 12:44
Please consider creating an SO snippet and may be minimizing the code further (see Minimal, Complete, and Verifiable example). Best regards
– YakovL
Nov 14 '18 at 12:44
add a comment |
2 Answers
2
active
oldest
votes
0
Change $("#td").show(''); to $("#td").show();
for more information about show() options, see this:
http://api.jquery.com/show/
answered Nov 12 '18 at 12:37
RGhanbariRGhanbari
944
1
this is actually not the issue.
– Jai
Nov 12 '18 at 12:38
putting void string into show() is not popular, it madeeasingoption for it. I checked the posted code, it works. but I suggestion to do best.
– RGhanbari
Nov 12 '18 at 13:40
add a comment |
0
You are rebinding events again and again on some events. Rather you should delegate the events and put them outside of other events:
$(document).ready(function()
$(".add").click(function()
$("#td").show();
);
);// <------.ready closing.
$('body').on('click', '.delete', function()
$(this).parents('tr').remove();
);
$('body').on('click', '.edit', function()
var one = $(this).closest('tr').find('td:eq(0)').text();
var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";
$(this).parents('tr').html(edit);
);
$('body').on('click', '.save', function()
var value = $("#text2").val();
var save = "<td style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$(this).parents('tr').html(save);
);
answered Nov 12 '18 at 12:34
JaiJai
64.2k95682
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%2f53262151%2fjquery-table-field-doesnt-work-after-editing-on-4th-time%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Change $("#td").show(''); to $("#td").show();
for more information about show() options, see this:
http://api.jquery.com/show/
answered Nov 12 '18 at 12:37
RGhanbariRGhanbari
944
1
this is actually not the issue.
– Jai
Nov 12 '18 at 12:38
putting void string into show() is not popular, it madeeasingoption for it. I checked the posted code, it works. but I suggestion to do best.
– RGhanbari
Nov 12 '18 at 13:40
add a comment |
0
Change $("#td").show(''); to $("#td").show();
for more information about show() options, see this:
http://api.jquery.com/show/
answered Nov 12 '18 at 12:37
RGhanbariRGhanbari
944
1
this is actually not the issue.
– Jai
Nov 12 '18 at 12:38
putting void string into show() is not popular, it madeeasingoption for it. I checked the posted code, it works. but I suggestion to do best.
– RGhanbari
Nov 12 '18 at 13:40
add a comment |
0
0
0
Change $("#td").show(''); to $("#td").show();
for more information about show() options, see this:
http://api.jquery.com/show/
answered Nov 12 '18 at 12:37
RGhanbariRGhanbari
944
Change $("#td").show(''); to $("#td").show();
for more information about show() options, see this:
http://api.jquery.com/show/
answered Nov 12 '18 at 12:37
RGhanbariRGhanbari
944
answered Nov 12 '18 at 12:37
RGhanbariRGhanbari
944
answered Nov 12 '18 at 12:37
RGhanbariRGhanbari
944
answered Nov 12 '18 at 12:37
RGhanbariRGhanbari
944
944
1
this is actually not the issue.
– Jai
Nov 12 '18 at 12:38
putting void string into show() is not popular, it madeeasingoption for it. I checked the posted code, it works. but I suggestion to do best.
– RGhanbari
Nov 12 '18 at 13:40
add a comment |
1
this is actually not the issue.
– Jai
Nov 12 '18 at 12:38
putting void string into show() is not popular, it madeeasingoption for it. I checked the posted code, it works. but I suggestion to do best.
– RGhanbari
Nov 12 '18 at 13:40
1
1
this is actually not the issue.
– Jai
Nov 12 '18 at 12:38
this is actually not the issue.
– Jai
Nov 12 '18 at 12:38
putting void string into show() is not popular, it made
easing option for it. I checked the posted code, it works. but I suggestion to do best.– RGhanbari
Nov 12 '18 at 13:40
putting void string into show() is not popular, it made
easing option for it. I checked the posted code, it works. but I suggestion to do best.– RGhanbari
Nov 12 '18 at 13:40
add a comment |
0
You are rebinding events again and again on some events. Rather you should delegate the events and put them outside of other events:
$(document).ready(function()
$(".add").click(function()
$("#td").show();
);
);// <------.ready closing.
$('body').on('click', '.delete', function()
$(this).parents('tr').remove();
);
$('body').on('click', '.edit', function()
var one = $(this).closest('tr').find('td:eq(0)').text();
var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";
$(this).parents('tr').html(edit);
);
$('body').on('click', '.save', function()
var value = $("#text2").val();
var save = "<td style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$(this).parents('tr').html(save);
);
answered Nov 12 '18 at 12:34
JaiJai
64.2k95682
add a comment |
0
You are rebinding events again and again on some events. Rather you should delegate the events and put them outside of other events:
$(document).ready(function()
$(".add").click(function()
$("#td").show();
);
);// <------.ready closing.
$('body').on('click', '.delete', function()
$(this).parents('tr').remove();
);
$('body').on('click', '.edit', function()
var one = $(this).closest('tr').find('td:eq(0)').text();
var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";
$(this).parents('tr').html(edit);
);
$('body').on('click', '.save', function()
var value = $("#text2").val();
var save = "<td style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$(this).parents('tr').html(save);
);
answered Nov 12 '18 at 12:34
JaiJai
64.2k95682
add a comment |
0
0
0
You are rebinding events again and again on some events. Rather you should delegate the events and put them outside of other events:
$(document).ready(function()
$(".add").click(function()
$("#td").show();
);
);// <------.ready closing.
$('body').on('click', '.delete', function()
$(this).parents('tr').remove();
);
$('body').on('click', '.edit', function()
var one = $(this).closest('tr').find('td:eq(0)').text();
var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";
$(this).parents('tr').html(edit);
);
$('body').on('click', '.save', function()
var value = $("#text2").val();
var save = "<td style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$(this).parents('tr').html(save);
);
answered Nov 12 '18 at 12:34
JaiJai
64.2k95682
You are rebinding events again and again on some events. Rather you should delegate the events and put them outside of other events:
$(document).ready(function()
$(".add").click(function()
$("#td").show();
);
);// <------.ready closing.
$('body').on('click', '.delete', function()
$(this).parents('tr').remove();
);
$('body').on('click', '.edit', function()
var one = $(this).closest('tr').find('td:eq(0)').text();
var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";
$(this).parents('tr').html(edit);
);
$('body').on('click', '.save', function()
var value = $("#text2").val();
var save = "<td style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
$(this).parents('tr').html(save);
);
answered Nov 12 '18 at 12:34
JaiJai
64.2k95682
edited Nov 12 '18 at 12:40
answered Nov 12 '18 at 12:34
JaiJai
64.2k95682
answered Nov 12 '18 at 12:34
JaiJai
64.2k95682
answered Nov 12 '18 at 12:34
JaiJai
64.2k95682
64.2k95682
add a comment |
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.
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%2f53262151%2fjquery-table-field-doesnt-work-after-editing-on-4th-time%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
Please consider creating an SO snippet and may be minimizing the code further (see Minimal, Complete, and Verifiable example). Best regards
– YakovL
Nov 14 '18 at 12:44