带有html / php表单（使用ajaxForm）的jQuery仅工作一次

Question

我已经尝试解决这个问题一段时间了，但没有成功。 需要Stackoverflow！

基本上，脚本的作用是从数据库中获取用户个人资料图片。 主持人可以看到它们，然后单击“禁令”按钮，然后banPeopleProcess.php文件具有从数据库中删除图片等的代码。示例： http ://screencast.com/t/uFtFgKxYx4s

每张图片都是一个表单，它们都有相同的表单ID。 这是HTML（在php echo中）：

<div>
<form id=\"banPeopleForm\" action=\"banPeopleProcess.php\" method=\"post\">
    <input type=\"hidden\" name=\"toid\" value=". $i ." />
    <input id=\"banPeopleBtn\" type=\"submit\" name=\"submit\" value=\"BAN\" />
</form>
</div>

JS当前看起来像这样：

<script type="text/javascript"> 

function banPeople() {
    $('#banPeopleForm').ajaxForm(function() {
        $('#banPeopleBtn').hide(); 
    });
}

$(document).ready(function() {
    $('#banPeopleBtn').click(function() {
        banPeople();
        });
    }); 
</script> 

• 实际上只有第一个加载的图片会执行其应做的工作（按钮处于隐藏状态，表单已提交等）
• 对于以下图片，JS不起作用，它们仅遵循普通的HTML格式-单击“禁止”按钮时，我们将重定向到banPeopleProcess.php。
• 话虽如此，看来只有第一个照片ID才装有JS，而其他照片没有。 我仍然不知道该怎么做。

帮助非常感谢的家伙！

Answer 1

您应该阻止form提交php文件，并使用ajax调用php.something之类的东西

$(document).ready(function() {
    $('#banPeopleBtn').click(function(e) {
        e.preventDefault();
        banPeople();    
        $.ajax({
        type: "POST",
        url: "banPeopleProcess.php"
        });

        });
    }); 

Answer 2

每张图片使用不同的ID。 使用不同的表单ID并为每张图片提交ID。 使动态javascript ID以及后面的$（'＃banPeopleBtn'+ id）.hide（）; 由于javascript不能在同一页面中使用相同的ID。