Ajax 回调仅适用于 jquery 表单组列表中的顶部 div
Ajax callback only applying to top div in list of jquery form groups
你好聪明的人，
所以正如标题所传达的那样，我遇到了一些困难，我浪费了整整 8 个小时试图弄明白:)
我之前发布了一个问题，但没有得到任何答案。我在使用 ajax 时遇到了困难，这是与表单的交互。此表单位于管理面板中，用于在我的（希望如此）soon-too-be 站点的前端动态创建和编辑导航链接。
我的问题具体是：我无法通过 ajax 获得 锚标签 [=] 的 text-content 56=]（导致表单下拉），立即反映在屏幕上...
http://i1379.photobucket.com/albums/ah126/conchairtoe/3_zpsb897a6a4.png
如您所见，ajax 有 运行，没有错误，但当我输入 "testing!!!!!!" in.
幕后的一切都有效，因为 数据库成功更新了相应的数据，一旦我重新加载页面，锚标记文本也会成功，但这不是很 ajax是现在！
这是提交表单时的 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（列表顶部）的任何可排序锚点 - 当我更改 "Home Page" 或再次更改 无论我碰巧移动到列表的顶部，标签都会根据 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 -->
所以，是的，我真的为我的无知道歉。请记住，大约 2 个月前我几乎无法理解 css。
非常感谢您提供帮助。
因为您没有查看 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();
你好聪明的人，
所以正如标题所传达的那样，我遇到了一些困难，我浪费了整整 8 个小时试图弄明白:)
我之前发布了一个问题，但没有得到任何答案。我在使用 ajax 时遇到了困难，这是与表单的交互。此表单位于管理面板中，用于在我的（希望如此）soon-too-be 站点的前端动态创建和编辑导航链接。
我的问题具体是：我无法通过 ajax 获得 锚标签 [=] 的 text-content 56=]（导致表单下拉），立即反映在屏幕上...
http://i1379.photobucket.com/albums/ah126/conchairtoe/3_zpsb897a6a4.png
如您所见，ajax 有 运行，没有错误，但当我输入 "testing!!!!!!" in.
幕后的一切都有效，因为 数据库成功更新了相应的数据，一旦我重新加载页面，锚标记文本也会成功，但这不是很 ajax是现在！
这是提交表单时的 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（列表顶部）的任何可排序锚点 - 当我更改 "Home Page" 或再次更改 无论我碰巧移动到列表的顶部，标签都会根据 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 -->
所以，是的，我真的为我的无知道歉。请记住，大约 2 个月前我几乎无法理解 css。
非常感谢您提供帮助。
因为您没有查看 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();