Question

index.php中的代码：

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title></title>
        <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
        <script>
            function carregaPagina(item, pai, filho, url) {
                var caminho = item != null ? $(item).attr('data-click') : url;
                if (item != null) {
                    if ($(item).attr('data-json') != null) {
                        $('#' + $(item).attr('local-json')).html($(item).attr('data-json'));
                    }
                }
                if (pai != "" && pai != null) {
                    $('#' + pai).slideToggle(1000);
                }
                $.ajax({
                    url: caminho,
                    cache: false,
                    dataType: "html",
                    success: function (data) {
                        $('#' + filho).slideToggle(0);
                        $('#' + filho).html(data);
                        $('#' + filho).slideToggle(1000, function () {
                            if (typeof completaLoad !== 'undefined' && $.isFunction(completaLoad)) {
                                completaLoad();
                            }

                            if ($('#' + pai).css('display') !== 'none') {
                                $('#' + pai).slideToggle(0);
                            }
                        });
                    }
                });
                return false;
            }

            $(document).ready(function () {
                $(document).on('click', '.grid', function (e) {
                    if (e.handled !== true) {
                        carregaPagina(this, 'TelaConsulta', 'TelaEditar', null);
                        e.handled = true;
                    }
                    return false;
                });
            });
        </script>
        <style>
            .grid, .item, .btnVoltar {
                cursor: pointer;
            }
            #TelaConsulta {
                background-color: #81BEF7;
            }
            #TelaEditar {
                background-color: #58FAAC;
            }
            #TelaItem {
                background-color: #F6D8CE;
            }
        </style>
    </head>
    <body>
        <div id="TelaConsulta">
            <ul>
                <li><span class="grid" data-click="editar.php?id=25">Edit</span></li>
                <li><span class="grid" data-click="editar.php?id=35">Edit</span></li>
            </ul>
        </div>
        <div id="TelaEditar">
        </div>
        <div id="TelaItem">
        </div>
    </body>
</html>

editar.php中的代码：

<script>
        $(document).ready(function () {
            $(document).on('click', '.item', function (e) {
                if (e.handled !== true) {
                    debugger;
                    var url = 'item.php?id=<?php echo $_GET['id']; ?>';
                    carregaPagina(null, 'TelaEditar', 'TelaItem', url);
                    e.handled = true;
                }
                return false;
            });
            $('#TelaEditar .btnVoltar').click(function () {
                $('#TelaEditar').slideToggle(1000, function () {
                    $('#TelaConsulta').slideToggle(1000);
                    $('#TelaEditar').empty();
                    $('#TelaEditar').removeAttr('style');
                });
                return false;
            });
        });
    </script>
    Id: <?php
      echo $_GET['id'];
    ?><br><br>
    <span class="item">Item</span><br><br>
    <span class="btnVoltar">Voltar</span>

item.php中的代码：

<script>
    $(document).ready(function () {
        $('#TelaItem .btnVoltar').click(function () {
            $('#TelaItem').slideToggle(1000, function () {
                $('#TelaEditar').slideToggle(1000);
                $('#TelaItem').empty();
                $('#TelaItem').removeAttr('style');
            });
            return false;
        });
        debugger;
    });
</script>
Id: <?php echo $_GET['id']; ?><br><br>
<span class="btnVoltar">Voltar</span>

在index.php文件中，单击1st Edit。

在editar.php的Item按钮中插入调试器，注意当您单击按钮时，它会打开VM108并返回Id 25。

http://i.stack.imgur.com/RjWER.png

在加载文件item.php中插入一个调试器，注意它会打开VM119并返回Id 25。

http://i.stack.imgur.com/qsljX.png

单击item.php文件后面的后退按钮，然后单击editar.php的后退按钮。在index.php文件中，单击2nd Edit并返回Id 35。

当您点击editar.php上的项目按钮时，请注意它会重新打开VM108。

http://i.stack.imgur.com/hSQfj.png

当看到item.php文件时，它会打开VM141并返回Id 25。

http://i.stack.imgur.com/2rbwf.png

这是我的疑问，每次打开editar.php时，它总会返回VM108。发生这种情况时，它不会更新项目ID并产生问题。

链接模拟：link

Answer 1

问题出现是因为点击事件仍处于活动状态。

如何通过Ajax HTML和JS代码知道如何创建一个点击事件，它将在我使用$（document）.on（）进行调用的屏幕上处于活动状态，以返回到主屏幕没有删除你应该使用调用的事件$（document）.off（）。

我的editar.php文件看起来像这样：

<script>
    $(document).ready(function () {
        $(document).on('click', '.item', function (e) {
            if (e.handled !== true) {
                debugger;
                var url = 'item.php?id=<?php echo $_GET['id']; ?>';
                carregaPagina(null, 'TelaEditar', 'TelaItem', url);
                e.handled = true;
            }
            return false;
        });
        $('#TelaEditar .btnVoltar').click(function () {
            $('#TelaEditar').slideToggle(1000, function () {
                //Remove click event
                $(document).off('click', '.item');
                $('#TelaConsulta').slideToggle(1000);
                $('#TelaEditar').empty();
                $('#TelaEditar').removeAttr('style');
            });
            return false;
        });
    });
</script>
Código: <?php
    echo $_GET['id'];
?><br><br>
<span class="item">Item</span><br><br>
<span class="btnVoltar">Voltar</span>

这是因为我直接在JS中传递了Id，如果我在表单字段中寻找值，那么就没有必要清理事件了。

JQuery中的$ .ajax调用相同的VM

1 个答案: