文章/答案/技术大牛

发布

社区首页 >问答首页 >单击后意外复制ajax调用

问单击后意外复制ajax调用
EN

Stack Overflow用户

提问于 2016-04-20 13:09:06

回答 2查看 874关注 0票数 2

当我单击动态添加的.add按钮时，我会调用ajax从数据中进行选择，但是当我在第一个模块中单击是可以的，但是当下一步我转到第二个模块时，我会单击复制的ajax调用并添加更多的过滤器我不知道我在哪里做了一个错误，所以请帮助我解决它。

下面是代码：

一个模块：

$(document).ready(function () {
            $("select").select2();
            var $toggleColumns = $('.toggleColumns');
            var datatableName = "list";
            var $body = $("body");
            var URL = 'xxx';
            var columns = [
                {'data': 'title', 'class': "datatable-row-title"},
                {'class': '',
                    'orderable': false,
                    "mData": "comment_type_value", "mRender": function (data, type, full) {
                        if (data > 0) {
                            return '<label class="details-control" style="width:100%; height:100%;"> ' + translate('t_expand_comment_type_down') + ' </label>';
                        } else {
                            return "";
                        }


                    },
                },
                {'mData': 'item', "mRender": function (data, type, full) {
                        return data;
                    }},
                {'data': 'seller'},
                {'data': 'buyer'},
                {'data': 'cat'},
                {'data': 'comment_type'},
                {'data': 'startts'},
                {'data': 'endts'},
                {'data': 'ts'},
                {'data': 'price'},
                {'data': 'qty'},
                {'data': 'sales'},
            ];
            var order = [];

    <?php if (isset($_GET["filters"])): ?>
                URL_TMP = URL;
                URL_TMP += "?insert=false";
                getAjaxDatatable(datatableName, URL_TMP, columns, order, "transaction");
                URL_TMP = "";
    <?php else: ?>
                getButtonsAfterAdded();
                $body.on("click", ".toggleColumnsButton", function (e) {
                    $("#columnsContainer").toggle("slow");
                    return false;
                });
                $body.on("click", ".remove", function (e) {
                    e.preventDefault();
                    $(this).parent().parent().remove();

                    getButtonsAfterRemove();


                    if ($("#list tbody tr").length > 0) {

                        var validate = validateTransaction();

                        if (validate.status == false) {
                            $.gritter.add({
                                title: tranlate("gritter_title_validate"),
                                text: validate.msg,
                                class_name: 'danger',
                                time: '5000'
                            });
                            loader.popup("hide");
                            return false;
                        }

                        getAjaxDatatable(datatableName, URL, columns, order, "transaction");
                    }


                    resetSelect2();

                });
                $body.on("change", ".commentType", function () {
                    if ($("#list tbody tr").length > 0) {
                        getAjaxDatatable(datatableName, URL, columns, order, "transaction");
                    }
                });
                $body.on("change", ".categories", function () {
                    if ($("#list tbody tr").length > 0) {
                        getAjaxDatatable(datatableName, URL, columns, order, "transaction");
                    }
                });
                $body.on('click', ".add", function (e) {
                    e.preventDefault();
                    var filterID = $(this).parent().prev().find("option:selected").attr("data-filteroptionid");
                    $(".filters").append(filtersHTMLTransactionSelect(filterID));
                    var filterId = $(".filter:last-child .chooseFilter option:not(:disabled)").attr("data-filterOptionId");
                    $(".filter").last().prepend("<div class='col-sm-4 form-group sibling'>" + filtersHTMLTransactionValues(filterId) + "</div>");
                    $(".filter").last().append(getCollectionOfButtons());

                    resetSelect2();

                    transactionDatepicker();

                    getButtonsAfterAdded();

                });

                $body.on("keypress", function (e) {
                    if (e.keyCode == 13) {
                        loader.popup("show");
                        var validate = validateTransaction();

                        if (validate.status == false) {
                            $.gritter.add({
                                title: tranlate("gritter_title_validate"),
                                text: validate.msg,
                                class_name: 'danger',
                                time: '5000'
                            });
                            loader.popup("hide");
                            return false;
                        }
                        getAjaxDatatable(datatableName, URL, columns, order, "transaction");
                    }
                });

                $body.on('click', ".search", function (e) {
                    e.preventDefault();
                    var validate = validateTransaction();
                    if (validate.status == false) {
                        $.gritter.add({
                            title: tranlate("gritter_title_validate"),
                            text: validate.msg,
                            class_name: 'danger',
                            time: '5000'
                        });
                        return false;
                    }
                    getAjaxDatatable(datatableName, URL, columns, order, "transaction");
                });

                $toggleColumns.on('click', function (e) {
                    var column = $('#' + datatableName).DataTable().column($(this).attr('data-column'));
                    column.visible(!column.visible());
                });


                $(".csv").on("click", function (e) {
                    e.preventDefault();
                    var validate = validateTransaction();

                    if (validate.status == false) {
                        $.gritter.add({
                            title: tranlate("gritter_title_validate"),
                            text: validate.msg,
                            class_name: 'danger',
                            time: '5000'
                        });
                        return false;
                    }
                    $.ajax({
                        method: "POST",
                        url: "xxxx",
                        dataType: "JSON",
                        data: {
                            filters: getActiveFiltersTransaction(),
                            format: 1,
                            module_id: <?php echo \kontrola\TransactionActions::$MODULE_ID; ?>
                        },
                        success: function (response) {
                            getAccessMessageWithStatusDataTable(response);
                            getUses();
                            $.gritter.add({
                                title: translate('gritter_title_raports'),
                                text: $("#waitingTimeForFile").html(),
                                class_name: 'success'
                            });
                            $("[data-controller-name=raportsDownloaded]").css({
                                "color": "red"
                            });
                            setTimeout(function () {
                                $(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
                                    color: "#505b72"
                                });
                                $.gritter.removeAll();
                            }, 15000);
                        }
                    });
                });

                $(".xls").on("click", function (e) {
                    e.preventDefault();
                    var validate = validateTransaction();

                    if (validate.status == false) {
                        $.gritter.add({
                            title: tranlate("gritter_title_validate"),
                            text: validate.msg,
                            class_name: 'danger',
                            time: '5000'
                        });
                        return false;
                    }
                    $.ajax({
                        method: "POST",
                        url: "xxx",
                        dataType: "JSON",
                        data: {
                            filters: getActiveFiltersTransaction(),
                            format: 0,
                            module_id: <?php echo \kontrola\TransactionActions::$MODULE_ID; ?>
                        },
                        success: function (response) {
                            getAccessMessageWithStatusDataTable(response);
                            getUses();

                            $.gritter.add({
                                title: translate('gritter_title_raports'),
                                text: $("#waitingTimeForFile").html(),
                                class_name: 'success'
                            });
                            $("[data-controller-name=raportsDownloaded]").css({
                                "color": "red"
                            });
                            setTimeout(function () {
                                $(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
                                    color: "#505b72"
                                });
                                $.gritter.removeAll();
                            }, 15000);
                        }
                    });
                });

                $body.on("click", "#raportsScroll", function (e) {
                    e.preventDefault();
                    var top = $("[data-controller-name=raportsDownloaded]").offset().top;
                    top = 241 - 65;
                    $('html, body').animate({
                        scrollTop: top
                    }, 1000);
                });

                $body.on("change", ".chooseFilter", function () {
                    var filterId = $(this).find(":selected").attr("data-filterOptionId");
                    $(this).parent().prev().html(filtersHTMLTransactionValues(filterId));
                    //                transactionDefaultStateOptions();
                    transactionDatepicker();
                    resetSelect2();
                });
    <?php endif; ?>
        });

另一个模块：

        $(document).ready(function () {
            $("select").select2();
            var $toggleColumns = $('.toggleColumns');
            var datatableName = "list";
            var $body = $("body");
            var URL = 'xxx';
            var columns = [
                {'data': 'title', 'class': "datatable-row-title"},
                {'mData': 'item', "mRender": function (data, type, full) {
                        return data;
                    }},
                {'data': 'price'},
                {'data': 'qty'},
                {'data': 'user'},
                {'data': 'cat'},
                {'data': 'startts'},
                {'data': 'endts'}
            ];
            var order = [];
            getButtonsAfterAdded();
    <?php if (isset($_GET["filters"])): ?>
                URL_TMP = URL;
                URL_TMP += "?insert=false";
                getAjaxDatatable(datatableName, URL_TMP, columns, order, "auction");
                URL_TMP = "";
    <?php else: ?>

                $body.on("click", ".toggleColumnsButton", function (e) {
                    $("#columnsContainer").toggle("slow");
                    return false;
                });
                $body.on("click", ".remove", function (e) {
                    e.preventDefault();
                    $(this).parent().parent().remove();

                    getButtonsAfterRemove();


                    if ($("#list tbody tr").length > 0) {

                        var validate = validateAuction();

                        if (validate.status == false) {
                            $.gritter.add({
                                title: tranlate("gritter_title_validate"),
                                text: validate.msg,
                                class_name: 'danger',
                                time: '5000'
                            });
                            loader.popup("hide");
                            return false;
                        }

                        getAjaxDatatable(datatableName, URL, columns, order, "auction");
                    }


                    $("select").select2("destroy");
                    $("select").select2();

                });
                $body.on("change", ".commentType", function () {
                    if ($("#list tbody tr").length > 0) {
                        getAjaxDatatable(datatableName, URL, columns, order, "auction");
                    }
                });
                $body.on("change", ".categories", function () {
                    if ($("#list tbody tr").length > 0) {
                        getAjaxDatatable(datatableName, URL, columns, order, "auction");
                    }
                });
                $body.on('click', ".add", function (e) {
                    e.preventDefault();
                    var filterID = $(this).parent().prev().find("option:selected").attr("data-filteroptionid");
                    $(".filters").append(filtersHTMLAuctionSelect(filterID));
                    var filterId = $(".filter:last-child .chooseFilter option:not(:disabled)").attr("data-filterOptionId");
                    $(".filter").last().prepend("<div class='col-sm-4 form-group sibling'>" + filtersHTMLAuctionValues(filterId) + "</div>");
                    $(".filter").last().append(getCollectionOfButtons());

                    $("select").select2("destroy");
                    $("select").select2();

                    auctionDatepicker();

                    getButtonsAfterAdded();

                });

                $body.on("keypress", function (e) {
                    if (e.keyCode == 13) {
                        loader.popup("show");
                        var validate = validateAuction();

                        if (validate.status == false) {
                            $.gritter.add({
                                title: tranlate("gritter_title_validate"),
                                text: validate.msg,
                                class_name: 'danger',
                                time: '5000'
                            });
                            loader.popup("hide");
                            return false;
                        }
                        getAjaxDatatable(datatableName, URL, columns, order, "auction");
                    }
                });

                $body.on('click', ".search", function (e) {
                    e.preventDefault();
                    var validate = validateAuction();
                    if (validate.status == false) {
                        $.gritter.add({
                            title: tranlate("gritter_title_validate"),
                            text: validate.msg,
                            class_name: 'danger',
                            time: '5000'
                        });
                        return false;
                    }
                    getAjaxDatatable(datatableName, URL, columns, order, "auction");
                });

                $toggleColumns.on('click', function (e) {
                    var column = $('#' + datatableName).DataTable().column($(this).attr('data-column'));
                    column.visible(!column.visible());
                });


                $(".csv").on("click", function (e) {
                    e.preventDefault();
                    var validate = validateAuction();

                    if (validate.status == false) {
                        $.gritter.add({
                            title: tranlate("gritter_title_validate"),
                            text: validate.msg,
                            class_name: 'danger',
                            time: '5000'
                        });
                        return false;
                    }
                    $.ajax({
                        method: "POST",
                        url: "xxx",
                        dataType: "JSON",
                        data: {
                            filters: getActiveFiltersAuction(),
                            format: 1,
                            module_id: <?php echo \kontrola\AuctionActions::$MODULE_ID; ?>
                        },
                        success: function (response) {
                            getAccessMessageWithStatusDataTable(response);
                            getUses();
                            $.gritter.add({
                                title: translate('gritter_title_raports'),
                                text: $("#waitingTimeForFile").html(),
                                class_name: 'success'
                            });
                            $("[data-controller-name=raportsDownloaded]").css({
                                "color": "red"
                            });
                            setTimeout(function () {
                                $(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
                                    color: "#505b72"
                                });
                                $.gritter.removeAll();
                            }, 15000);
                        }
                    });
                });

                $(".xls").on("click", function (e) {
                    e.preventDefault();
                    var validate = validateAuction();

                    if (validate.status == false) {
                        $.gritter.add({
                            title: tranlate("gritter_title_validate"),
                            text: validate.msg,
                            class_name: 'danger',
                            time: '5000'
                        });
                        return false;
                    }
                    $.ajax({
                        method: "POST",
                        url: "xxxx",
                        dataType: "JSON",
                        data: {
                            filters: getActiveFiltersAuction(),
                            format: 0,
                            module_id: <?php echo \kontrola\AuctionActions::$MODULE_ID; ?>
                        },
                        success: function (response) {
                            getAccessMessageWithStatusDataTable(response);
                            getUses();

                            $.gritter.add({
                                title: translate('gritter_title_raports'),
                                text: $("#waitingTimeForFile").html(),
                                class_name: 'success'
                            });
                            $("[data-controller-name=raportsDownloaded]").css({
                                "color": "red"
                            });
                            setTimeout(function () {
                                $(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
                                    color: "#505b72"
                                });
                                $.gritter.removeAll();
                            }, 15000);
                        }
                    });
                });

                $body.on("click", "#raportsScroll", function (e) {
                    e.preventDefault();
                    var top = $("[data-controller-name=raportsDownloaded]").offset().top;
                    top = 241 - 65;
                    $('html, body').animate({
                        scrollTop: top
                    }, 1000);
                });

                $body.on("change", ".chooseFilter", function () {
                    var filterId = $(this).find(":selected").attr("data-filterOptionId");
                    $(this).parent().prev().html(filtersHTMLAuctionValues(filterId));
                    auctionDefaultStateOptions();
                    auctionDatepicker();
                    $("select").select2("destroy");
                    $("select").select2();

                });
    <?php endif; ?>
        });


<?php endif; ?>

Ajax调用函数如下所示：

function filtersHTMLAuctionSelect() {
    var filters = "";
    $.ajax({
        method: "POST",
        url: "xxxxx",
        dataType: "JSON",
        async: false,
        success: function (response) {
            filters += "<div class='filter'><div class='col-sm-4 form-group'>";
            filters += "<select class='form-control chooseFilter' style='width: 100%;'>";
            $.each(response, function (index, value) {
                filters += "<option data-filterOptionId=" + value.id + ">" + translate(value.title) + "</option>";
            });
            filters += "</select>";
        }
    });
    filters += "</div></div>";
    return filters;
}

好的，我通过将其添加到动态添加的按钮来解决问题：

$body.off('click', '#add').on('click', "#add", function (e) {
$body.off('click', '#search').on('click', "#add", function (e) {

这对我很管用。

HTML按钮组：

<div class="col-sm-4 form-group">
                <div class="col-lg-3"></div>
                <div class="col-lg-1"></div>
                <button class="add btn btn-success btn-quirk col-sm-3" id="add"><i class="glyphicon glyphicon-plus"></i></button>
                <div class="col-lg-1"></div>
                <button class="search btn btn-warning btn-quirk col-sm-3" id="search"><i class="glyphicon glyphicon-search"></i></button>
            </div>

jquery

javascript

php

回答 2

Stack Overflow用户

发布于 2016-04-20 13:31:09

也许你也需要停止传播，这可能是一个冒泡的问题。

所以当你调用

e.preventDefault();

还要调用stop propagation，它会让你的代码看起来像这样：

e.preventDefault();
e.stopPropagation();

你可以在这里阅读更多内容：https://api.jquery.com/event.stoppropagation/

编辑：

另一件可能出错的事情是：

$body.on('click', "#add", function (e) {

尝试使用

$('#add').on('click', function (e) {

票数 1

Stack Overflow用户

发布于 2016-04-20 14:11:33

有时，如果我们在一个包含子元素的元素上进行ajax调用，并为子元素重复调用函数，有时会出现这个问题。并尝试以下解决方案- $('#add').on('click', function (e) {

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36734326

复制

相似问题

问单击后意外复制ajax调用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击后意外复制ajax调用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击后意外复制ajax调用
EN