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

$.ajax in JQuery call same VM

本文关键字：VM 调用 中的 ajax JQuery      更新时间：2023-09-26

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文件中，单击第一个编辑。

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

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

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

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

不久之后，我单击item.php文件上的后退按钮，然后单击editar.php的后退按钮。在index.php文件中，单击第二个Edit并返回Id 35。

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

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

当它出现item.php文件时，请注意它打开VM141并返回Id 25。

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

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

链路模拟：链路

由于单击事件仍然处于活动状态，因此出现了问题。

我是如何通过Ajax HTML和JS代码创建点击事件的？它会在屏幕上激活，我正在使用$（document）.on（）进行调用，要返回到主屏幕，我没有删除事件，你应该使用调用$（document）.of（）.

我的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，例如，如果我在表单字段中查找值，则无需清除事件。

相关文章：