html Dynami c кнопка редактирования таблицы по событию клика не загружает модальный

Question

Моя конечная цель - отредактировать данные json и отправить их обратно на сервер, если в строке будет какое-либо обновление

. Я использую следующий код для получения данных json в таблицу и динамически добавить кнопку редактирования в конце столбца.

$.getJSON("echo_int_ip.php", function get_mem_update(json) {
                my_json = json;
                var tr;
                var n=5;

                for (var i = 0; i < n; i++) {

                    tr = $('<tr/>');
                    var mem_date = "<td style=\"min-width:90px\"><label id='mem_date'>" + my_json[i].id + "</label></td>";
                    tr.append(mem_date);
                    var mem_name = "<td class=\"contact_name\" style=\"min-width:150px\"><label id='mem_name'>" + my_json[i].fi_name + "</label></td>";
                    tr.append(mem_name);
                    var mem_reason = "<td><label id='mem_reason'>" + my_json[i].agent_ + "</label></td>";
                    tr.append(mem_reason);
                    var mem_comment = "<td style=\"max-width:150px\"><label id='mem_comment'>" + my_json[i].date + "</label></td>";
                    tr.append(mem_comment);
                    var mem_butn = "<td><input type=\"button\" id=\"btnedt\" value=\"Edit\" /></td>";
                    tr.append(mem_butn);
                    $('#table_member').append(tr);

                }
            });

в соответствии с предоставленным решением здесь , я использовал следующий скрипт для создания события onclick и получения данных строки.

<script>
        $(document).ready(function () {
            $(document).on('click', '#btnedt', function() {
         //   alert($(this).closest('tr').find('.contact_name').text());
$("#newModal").modal("show");
            });
        });
    </script>

это образец модального режима, который я сейчас пытаюсь загрузить, но он не работает. Я потратил часы, пытаясь найти способ, но в итоге попросил у вас экспертов. Заранее спасибо

<div class="modal fade" id="newModal" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Error</h4>
                </div>
                <div class="modal-body">
                    <p> </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

Прежде всего, вы не можете иметь много идентификаторов с одинаковым значением на одной html странице. Потому что это приведет к ошибке в будущем, пока вы делаете много кода для него. Пожалуйста, измените ваш btnedt на класс, а не идентификатор. затем измените ваш скрипт следующим образом.

<script>
    $(document).ready(function () {
         $(document).on('click', '.btnedt', function() {
              //   alert($(this).closest('tr').find('.contact_name').text());
              $("#newModal").modal("show");
         });
    });
</script>

, если модальная проблема уже существует. Тогда вот некоторые причины, по которым он не появляется

1. Удалите класс увядания в вашем модале.
2. Версии ваших Javascript и Bootstrap не соответствует.
3. Вы забыли включить bootstrap. js библиотеку в документ

проверьте это введите описание ссылки здесь

Answer 2

Используйте класс вместо нескольких идентификаторов

Поделитесь своим модальным кодом

var mem_butn = "<td><input type=\"button\" class=\"btnedt\" value=\"Edit\" /></td>";

<script>
    $(document).ready(function () {
         $('body').on('click', '.btnedt', function() {
              $("#newModal").modal("show");
         });
    });
</script>