我在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>
一切都适用于第一个动作。我可以使用上面的代码删除或添加用户。单击图标将数据发送到AJAX。AJAX运行适当的查询，我重新构建用户表。该响应返回到第一个文件，users表被替换为新的users表，而不进行刷新。一切都很好，直到我尝试第二次行动。
第二次点击不做任何事情。第三次单击导致整个页面重新加载，操作再次运行。例如，我进入页面，点击删除一个用户。它们被删除。我点击删除另一个用户。什么也不会发生。我再次点击。页面重新加载，它们被删除。
我不确定它是否重要，但我使用PHP include第一次加载页面以包含我的AJAX提交的相同文件。这个文件生成"用户表"。
<div id="wrap">
<?php include 'ajax.users.php'; ?>
</div>
我找遍了，找不到任何与这种情况有关的东西。我似乎不能给谷歌的关键字的正确组合得到我正在寻找的答案。
$('input[name=submit]').click(function(event){仅绑定到调用.click时存在的输入。使用事件委托
$("#wrap").on('click', 'input[name=submit]', function (event) {
您的javascript将click事件的事件处理程序附加到与"input[name=submit]"选择器匹配的任何元素上，但只在页面加载后执行一次。
这意味着任何其他匹配选择器的表单都不会附加此处理程序，因此您需要一个委托的事件处理程序。
$(document).on("click","input[name=submit]",function() {...});
理想情况下，您应该使用一个类来标识应该以这种方式运行的提交按钮，否则每个提交按钮将使用相同的处理程序。