Question

帮助，我有一个很大的问题，ajax，我使用ajax删除记录，使用确认窗口引导程序，非常好，当我按下按钮删除它正确运行和表刷新没有任何问题，问题是，当我想要删除另一条记录，打开模态窗口引导程序，但不要运行任何东西

<head>
        <script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
            <!--<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->
    </head>
    <script type="text/javascript" >
        var base_url = '<?php echo base_url() ?>clientes/eliminar';
            $('#confirmar').click(function (e) {
                var modalDiv = $(e.delegateTarget);
                var id = $(this).data('recordId');
                $('#confirm-delete').addClass('loading');
                setTimeout(function () {
                    modalDiv.modal('hide').removeClass('loading');
                }, 100000);
                $.ajax({
                    type: "POST",
                    url: base_url,
                    data: "idcliente=" + id,
                    beforeSend: function () {
                        //$('#msgUsuario').html('<span></span>');
                    },
                    success: function (respuesta) {
                        $('#confirm-delete').hide();
                        $('.modal-backdrop').hide();
                        $('#contenedor2').html(respuesta);
                    }
                });

            });

            // Bind to modal opening to set necessary data properties to be used to make request
            $('#confirm-delete').on('show.bs.modal', function (e) {

                var data = $(e.relatedTarget).data();
                $('.title', this).text(data.recordTitle);
                $('.btn-ok', this).data('recordId', data.recordId);
            });
        });

    </script>
    <style>
        .modal.loading .modal-content:before {
            content: 'Loading...';
            text-align: center;
            line-height: 155px;
            font-size: 20px;
            background: rgba(0, 0, 0, .8);
            position: absolute;
            top: 55px;
            bottom: 0;
            left: 0;
            right: 0;
            color: #EEE;
            z-index: 1000;
        }
    </style>
    <li><a data-toggle="modal" data-target="#events-modal">Nuevo Cliente</a></li>
<div id="contenedor2" class="col-md-8 col-md-offset-2">
    <table >
        <tr>
            <th class="col-xs-4" style="text-align:left;border:1px solid">Name</th>
            <th class="col-xs-4" style="text-align:left;border:1px solid">tel</th>
            <th class="col-xs-2" style="text-align:center;border:1px solid">Email</th>
            <th class="col-xs-1" style="text-align:center;border:1px solid">Edit</th>
            <th class="col-xs-1" style="text-align:center;border:1px solid">Delete</th>
        </tr>
        <tbody class="tablenotas">
            <?php
            if (is_null($lista)) {
                echo "<h4>Para comenzar presiona el bot&oacute;n Nuevo</h4>";
            } else {
                $base = base_url();
                foreach ($lista as $fila):
                    echo '<tr style="text-align:justify">' .
                    '<td style="text-align:left;border:1px solid">' . $fila->NombreCliente . '</td>' .
                    '<td style="text-align:left;border:1px solid">' . $fila->RazonSocial . '</td>' .
                    '<td style="text-align:center;border:1px solid">' . $fila->Email . '</td>' .
                    '<td style="text-align:center;border:1px solid"><a  href="' . $base . 'clientes/detalles_cliente/' . $fila->Id_Cliente . '"><span class="glyphicon glyphicon-edit"></span></a></td>' .
                    '<td style="text-align:center;border:1px solid"><a href="#" data-record-id="' . $fila->Id_Cliente . '"  data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash"></span></td>' .
                    '</tr>';
                endforeach;
            }
            ?>
        </tbody>
    </table>
    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
                </div>
                <div class="modal-body">
                    <p>Estás a punto de eliminar <b><i class="title"></i></b> el registro, este procedimiento es irreversible.</p>
                    <p>Desea proceder?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button type="button" id="confirmar" class="btn btn-danger btn-ok">Continuar</button>
                </div>
            </div>
        </div>
    </div>
</div>

在我的控制器中

function delete() {
    $idcliente = $this->input->post('idcliente');
    if ($this->ion_auth->is_admin()) {
        if ($this->Cliente_model->delete($idcliente)) {
            $this->_data['lista'] = $this->Cliente_model->getClientes();
            $this->load->view('user/clientes', $this->_data);
        }
    }
}

Answer 1

看起来模态html位于ID为#contenedor2的DIV内部，因此当您更改HTML（$('#contenedor2').html(respuesta);）时，您还会添加一个带有模式HTML的新DIV， BUT < / strong>之后这将不起作用：

$('#confirmar').click(function (e) { // YOUR CODE });

要解决此问题，请尝试委托此类事件（将以上代码替换为以下代码）：

$('#contenedor2').on('click', '#confirmar', function (e) { e.preventDefault(); var modalDiv = $(e.delegateTarget); var id = $(this).data('recordId'); ..... REST OF YOUR CODE });

AJAX JQuery删除数据

1 个答案: