javascript - Ajax回调仅适用于jquery表单组列表中的顶部div

Question

聪明的人们你好，

正如标题所表达的那样，我遇到了一些困难，我浪费了 8 个小时来试图解决这个问题:)

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

我的问题具体是:我无法通过ajax立即获得 anchor 标记的文本内容(这会导致表单下拉)反射(reflect)在屏幕上...

http://i1379.photobucket.com/albums/ah126/conchairtoe/3_zpsb897a6a4.png

如您所见，ajax 已运行，没有错误，但当我输入“testing!!!!!!”时，标签(用于制定下拉表单的 anchor 标记)仍然是“test”英寸。

幕后的一切都有效，因为数据库成功更新了相应的数据，一旦我重新加载页面， anchor 标记文本也会更新，但现在不是很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(列表顶部)的可排序 anchor - 当我更改“主页”时，或者再次我碰巧移动到哪个 anchor 时在列表顶部，标签会根据 ajax 立即更新。

正如您在代码中看到的，我有这些警报来验证这一点: http://i1379.photobucket.com/albums/ah126/conchairtoe/final_zps7a7ddc68.png

这里是DOM环境的代码

导航

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

所以，是的，我真的为我的无知道歉。请记住，就在两个月前左右，我还几乎无法掌握 css。

非常感谢您的帮助(如果您能提供帮助)。

Answer 1

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

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