Question

我在点击事件上有一个奇怪的错误。每次我点击按钮，它都会再添加一个帖子。如果我点击更新按钮，它会执行一次发布电话，如果我再次点击它（第二次），它会发出两个帖子电话等等。它自己的代码正在运行，但这个bug有点烦人。有谁知道会发生什么？

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;
});

HTML code：

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

Answer 1

要阻止处理程序多次执行，请将stopImmediatePropagation()添加到函数中。

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

Answer 2

要删除旧处理程序，您可以调用update.off（＆＃39;点击＆＃39;）。（＆＃39;点击＆＃39;，...

对取消事件执行相同操作。

从手机发送，很抱歉不详细。

Answer 3

为您的更新链接提供与其他按钮类似的角色：

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

然后，您可以在update处理程序之外绑定cancel和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;
    });

您可以类似地执行cancel按钮。

Jquery 2.1 - 点击是堆叠呼叫

3 个答案: