Tengo un error extraño con el evento al hacer clic. Cada vez que hago clic en el botón, se agrega una llamada posterior más. Si hago clic en el botón actualizar una vez, hará una llamada de publicación , si hago clic de nuevo (por segunda vez) hará dos publicaciones llamadas y así uno. El código en sí mismo funciona, pero este error es un poco molesto. ¿Alguien tiene idea de lo que está pasando?

var
    editCutomerType   = $('a[role=editCutomerType]'),
    deleteCutomerType = $('a[role=deleteCutomerType]');

editCutomerType.on('click', function(e) {
    var
        $this           = $(this),
        parentContainer = $this.closest('.parent'),
        nameContainer   = parentContainer.find('.name'),
        update          = $this.next('a'),
        cancel          = update.next('a'),
        oldName         = nameContainer.text()
        i = 0;

        $this.hide();
        update.removeClass('hidden');
        cancel.removeClass('hidden');

        nameContainer.empty().append('<input type=text name=name value="' + oldName + '">');

        update.on('click', function(e) {
            var
                url     = $(this).attr('href'),
                newName = parentContainer.find('input').val(),
                data    = 'name=' + newName;

                $.post(url, data, function(data, textStatus, xhr) {
                    nameContainer.empty().text(newName);
                    $this.show();
                    update.addClass('hidden');
                    cancel.addClass('hidden');
                });
            return false;
        });

        cancel.on('click', function(e) {
            nameContainer.empty().text(oldName);
            $this.show();
            update.addClass('hidden');
            cancel.addClass('hidden');
            return false;
        });
        i++;
        console.log(i);
    return false;
});

Código HTML:

<div class="col-md-7">
    <div class="panel panel-dark panel-light-green">
        <div class="panel-heading">
            <span class="panel-title"><i class="panel-title-icon fa fa-smile-o"></i>Customer Types</span>
        </div> <!-- / .panel-heading -->
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th></th>
                </tr>
            </thead>

            <tbody class="valign-middle">
                <?php
                    $i = 1;
                    foreach ($customerTypes as $ct): ?>
                    <tr class="parent">
                        <td><?php echo $i ?></td>
                        <td class="name"><?php echo $ct['name'] ?></td>
                        <td>
                            <a role="editCutomerType" class="btn btn-primary btn-xs">Edit</a>
                            <a class="btn btn-primary btn-xs hidden" href="<?php echo base_url("customerTypes/save/{$ct['id']}") ?>">Update</a>
                            <a role="cancel" class="btn btn-warning btn-xs hidden">Cancel</a>
                            <a role="deleteCutomerType" class="btn btn-danger btn-xs" href="<?php echo base_url("customerTypes/delete/{$ct['id']}") ?>">Delete</a>
                        </td>
                        <td></td>
                    </tr>
                <?php $i++; endforeach ?>

            </tbody>
        </table>
    </div> <!-- / .panel -->
</div>
0
Sasha 29 ago. 2014 a las 13:05

3 respuestas

La mejor respuesta

Asigne a su enlace de actualización una función similar a sus otros botones:

                foreach ($customerTypes as $ct): ?>
                <tr class="parent">
                    <td><?php echo $i ?></td>
                    <td class="name"><?php echo $ct['name'] ?></td>
                    <td>
                        <a role="editCutomerType" class="btn btn-primary btn-xs">Edit</a>
                        <a role="update" class="btn btn-primary btn-xs hidden" href="<?php echo base_url("customerTypes/save/{$ct['id']}") ?>">Update</a>
                        <a role="cancel" class="btn btn-warning btn-xs hidden">Cancel</a>
                        <a role="deleteCutomerType" class="btn btn-danger btn-xs" href="<?php echo base_url("customerTypes/delete/{$ct['id']}") ?>">Delete</a>
                    </td>
                    <td></td>
                </tr>
            <?php $i++; endforeach ?>

Luego puede enlazar controladores para update y cancel fuera del controlador editCutomerType:

$("a[role=update]").on('click', function(e) {
        var
            $this = $(this),
            cancel = $this.next('a'),
            edit = $this.prev('a'),
            url     = $this.attr('href'),
            newName = $this.closest('.parent').find('input').val(),
            nameContainer = parentContainer.find('.name'),
            data    = 'name=' + newName;

            $.post(url, data, function(data, textStatus, xhr) {
                nameContainer.empty().text(newName);
                edit.show();
                $this.addClass('hidden');
                cancel.addClass('hidden');
            });
        return false;
    });

Puede hacer el botón cancel de manera similar.

1
Barmar 29 ago. 2014 a las 09:21

Para eliminar el controlador anterior, puede llamar a update.off ('clic'). On ('clic', ...

Haga lo mismo para el evento de cancelación.

Enviado desde el teléfono, lo siento por no ser detallada.

1
Dogsworth 29 ago. 2014 a las 09:19

Para evitar que el controlador se ejecute más de una vez, agregue stopImmediatePropagation () a la función.

    update.on('click', function(e) {
        var
            url     = $(this).attr('href'),
            newName = parentContainer.find('input').val(),
            data    = 'name=' + newName;

            $.post(url, data, function(data, textStatus, xhr) {
                nameContainer.empty().text(newName);
                $this.show();
                update.addClass('hidden');
                cancel.addClass('hidden');
            });
        return false;
        e.stopImmediatePropagation();
    });
1
aolsen 29 ago. 2014 a las 09:12