gpt4 book ai didi

jQuery AJAX 用表单替换提交的表单(很好),但不会再次提交

转载 作者:行者123 更新时间:2023-12-01 04:15:28 28 4
gpt4 key购买 nike

我在 PHP 中使用循环来显示 CMS 管理部分中的用户数据。每行(用户)都包含一些我想要连接到命令的图标(例如:编辑、删除等)。表的最后一行有空的输入字段,带有单个图标(命令),以允许添加新用户。这是用户表的 HTML...

<div id="wrap">
<form method="post" id="form_users">
<div class="table">
<div class="row header">
<div class="columns icons"></div>
<div class="columns data">Username</div>
<div class="columns data">First Name</div>
<div class="columns data">Last Name</div>
<div class="columns data">Email</div>
<div class="clear"></div>
</div><!-- .header -->
<div class="row odd">
<div class="columns icons">
<input type="hidden" name="userID" value="0000000010" />
<input type="image" src="../img/icons/delete_16.png" name="submit" value="delete" />
<a href="?action=edit&userID=0000000010" class="edit"></a>
</div>
<div class="columns data">admin</div>
<div class="columns data">david</div>
<div class="columns data">kirkland</div>
<div class="columns data">awesome@example.com</div>
<div class="clear"></div>
</div>
<div class="row even">
<div class="columns icons">
<input type="hidden" name="userID" value="0000000001" />
<input type="image" src="../img/icons/delete_16.png" name="submit" value="delete" />
<a href="?action=edit&userID=0000000001" class="edit"></a>
</div>
<div class="columns data">coolguy</div>
<div class="columns data">john</div>
<div class="columns data">doe</div>
<div class="columns data"></div>
<div class="clear"></div>
</div>
<div class="row new">
<div class="columns icons">
<input type="image" src="../img/icons/save_16.png" name="submit" value="new" />
</div>
<div class="columns data">
<input type="text" name="user[2][username]" value="" maxlength="30" class="field new" />
</div>
<div class="columns data">
<input type="text" name="user[2][first_name]" value="" maxlength="30" class="field new" />
</div>
<div class="columns data">
<input type="text" name="user[2][last_name]" value="" maxlength="30" class="field new" />
</div>
<div class="columns data">
<input type="text" name="user[2][email]" value="" maxlength="30" class="field new" />
</div>
<div class="clear"></div>
</div>
</div><!-- .table -->
</form>

当单击其中一个图标时,我使用 jQuery/AJAX 将命令发送到服务器。响应是来自 <form> 的更新后的用户表。至</form> 。这是 jQuery...

<script type="text/javascript">
$(function(){

$('input[name=submit]').click(function(event){

event.preventDefault();

// setup array
var values = {};

// which submit button was clicked
var submit_type = $(this).val();

if( submit_type=='new' ){

$('form input:not(input[name=submit])').each(function(){
values[this.name] = $(this).val();
});

}else{

$(this).siblings().not('input[name=submit]').each(function(){
values[this.name] = $(this).val();
});

}

$.ajax({
type: "POST",
url: "ajax.users.php",
data: { action: submit_type, data: values }
}).done(function( response ) {
$('#wrap').html(response);
});

});

});
</script>

一切都为了第一个 Action 。我可以使用上面的代码删除或添加用户。单击该图标会将数据发送到 AJAX。 AJAX 运行适当的查询,然后我重建用户表。该响应返回到第一个文件,并且用户表被新的用户表替换而无需刷新。一切都很好,直到我尝试第二个操作。

第二次单击没有任何反应。第三次单击会重新加载整个页面,并且该操作再次起作用。比如我进入页面,点击删除一个用户。它们被删除。我点击删除另一个用户。什么都没发生。我再次点击。页面重新加载并且它们被删除。

我不确定这是否重要,但我在页面第一次加载时使用 PHP include 来包含我的 AJAX 提交到的同一文件。该文件生成“用户表”。

<div id="wrap">
<?php include 'ajax.users.php'; ?>
</div>

我已经查遍了,但找不到任何与这种情况完全相关的内容。我似乎无法为谷歌提供正确的关键字组合来获得我正在寻找的答案。任何帮助将不胜感激。

最佳答案

$('input[name=submit]').click(function(event){ 仅绑定(bind)到 .click 时存在的输入调用。使用事件委托(delegate)。

$("#wrap").on('click', 'input[name=submit]', function (event) {

关于jQuery AJAX 用表单替换提交的表单(很好),但不会再次提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15169564/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com