Javascript Ajax回调仅应用于jquery表单组列表中的顶级div

你好，聪明人

因此，正如标题所传达的，我遇到了一些困难，我已经浪费了整整8个小时试图解决它：）

我之前发布了一个问题，但没有得到答案。我在使用ajax时遇到了困难，它与表单的交互也遇到了困难。此表单位于管理面板中，用于动态创建和编辑我（希望）的网站前端的导航链接

我的问题是：通过ajax，我无法立即在屏幕上反映锚定标记的文本内容（这会导致表单下拉）

如您所见，ajax已经运行，没有错误，但是当我在中键入“testing！！！！！！！”时，标签（用于制定下拉表单的锚定标记）仍然是“test”

后台的一切都正常工作，数据库成功地更新了相应的数据，我重新加载页面后锚定标签文本也正常工作，但现在不是很ajaxy，是吧

下面是提交表单时使用的Javascript

// NAV ITEM FORM - UPDATE / SUBMIT      
    $(".nav-form").submit(function(event) {

        var navData = $(this).serializeArray(); // The serializeArray( ) method serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with.
        var navLabel = $('input[name=label]').val();        
        var navID = $('input[name=id]').val();

        $.ajax({

            url: "ajax/navigation.php",
            type: "POST",
            data: navData

        }).done(function(){

            $("#label_"+navID).html(navLabel);

        }); // END $.ajax

        alert("navID = "+navID+"  navLabel = "+navLabel);

        event.preventDefault(); // will prevent form from submitting

    });//END nav-form

请注意.done回调

我已经把问题缩小了

ajax只在位置1（列表顶部）的可排序锚点中的任何一个上起作用-因为当我更改“主页”，或者再次更改，无论哪一个我碰巧移动到列表顶部，标签都会根据ajax立即更新。

正如您在代码中看到的，我有这些警报来验证这一点：

下面是DOM环境的代码 航行

因为您没有查看
navID
的当前表单。代码
$（'input[name=id]'）
正在使用它找到的第一个元素。您需要查看表单，使用find（）

尝试通过检查来调试您的响应
.done（函数（数据）{console.log（数据）；}）
<div class="row">

<div class="col-md-3">

    <ul id="sort-nav" class="list-group-item">          

<!--EXISTING NAV-ITEMS-->           
        <?php

            $query = "SELECT * FROM navigation ORDER BY position ASC";
            $result = mysqli_query($dbc, $query);

            while ($list = mysqli_fetch_assoc($result)) {  ?>

                <li id="list_<?php echo $list['id']; ?>" class="list-group-item">

                    <a id="label_<?php echo $list['id']; ?>" data-toggle="collapse" data-target="#form_<?php echo $list['id']; ?>">

                        <?php echo $list['label']; ?> <i class="fa fa-chevron-down"></i>

                    </a>                        

                    <div id="form_<?php echo $list['id']; ?>" class="collapse">

                        <!--FORM-->             
                        <form class="form-horizontal nav-form" role="form" action="index.php?page=navigation&id=<?php echo $list['id']; ?>" method="post">

                            <!-- ID  -->                    
                            <div class="form-group">

                                <label class="col-sm-2 control-label" for="id">ID</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control input-sm" value="<?php echo $list['id'];?>" name="id" id="id" placeholder="ID - name" />                                         
                                </div>

                            </div>

                            <!-- LABEL -->
                            <div class="form-group">

                                <label class="col-sm-2 control-label" for="label">Label</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control input-sm" value="<?php echo $list['label'];?>" name="label" id="label" placeholder="Label" />
                                </div>

                            </div>

                        <!--URL -->                 
                            <div class="form-group">

                                <label class="col-sm-2 control-label" for="value">URL</label>

                                <div class="col-sm-10">
                                    <input class="form-control input-sm" type="text" value="<?php echo  $list['url'];?>" name="url" id="url" placeholder="URL"></input>
                                </div>

                            </div>

                            <!--POSITION -->                    
                            <div class="form-group">

                                <label class="col-sm-2 control-label" for="value">Position</label>

                                <div class="col-sm-10">
                                    <input class="form-control input-sm" type="text" value="<?php echo  $list['position'];?>" name="position" id="position" placeholder="Position"></input>
                                </div>

                            </div>

                            <!-- STATUS -->
                            <div class="form-group">

                                <label class="col-sm-2 control-label" for="status">Status</label>

                                <div class="col-sm-10">
                                    <input class="form-control input-sm" type="text" value="<?php echo  $list['status'];?>" name="status" id="status" placeholder=""></input>
                                </div>

                            </div>

                            <!--Button and Hidden Input-->                  
                            <button type="submit" class="btn-btn-default">Save</button>
                            <input type="hidden" name="submitted" value="1" />
                            <input type="hidden" name="opened_id" value="<?php echo $list['id']; ?>" />

                            <span class="pull-right">
                                <a id="del_<?php echo $list['id']; ?>" class="btn btn-danger nav-item-delete" href="#" style="margin-bottom: 2px;" title="delete nav item"><i class="fa fa-trash"/></i></a>
                            </span>

                        </form>  <!--END form-->

                    </div>

                </li>

            <?php } ?>      

    </ul>

</div>

<div class="col-md-9">

    <div id="callback"><?php if(isset($message)) { echo $message; } ?></div>

</div>  <!-- END col-md-12 -->

var form = $(this);
var navData = form.serializeArray(); 
var navLabel = form.find('input[name=label]').val();        
var navID = form.find('input[name=id]').val();