Поле таблицы jquery не работает после редактирования в 4-й раз - PullRequest
Новая
       7

Поле таблицы jquery не работает после редактирования в 4-й раз

0 голосов
/ 12 ноября 2018

Проблема в том, что когда я добавляю пользователя и редактирую его, он работает до 4-й попытки. После этого застревает и не работает. Что может быть причиной? Это мой HTML-код: 

<!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>

А это мой 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>

И некоторый стиль CSS, который не является обязательным. Основная проблема в том, что код на самом деле работает после редактирования пару раз. После 5-6 попыток останавливается добавление пустого поля, не могли бы вы взглянуть на мой код, если возникла проблема?

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Измените $("#td").show(''); на $("#td").show();

для получения дополнительной информации о show() опциях, см. Это: http://api.jquery.com/show/

0 голосов
/ 12 ноября 2018

Вы связываете события снова и снова для некоторых событий. Скорее вы должны делегировать события и поместить их вне других событий: 

$(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);

});
...