jQuery与html / php表单（使用ajaxForm）只工作一次

I've been trying to solve this for a while now and no success. Stackoverflow needed!

Basically, what the script does is fetch user profile pictures from the database. A moderator can see them and click on the "Ban" button, and then the banPeopleProcess.php file has the code to remove the picture from the database etc. Example: http://screencast.com/t/uFtFgKxYx4s

Each picture is a form, they all have the same form id. Here's the HTML (in 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>

The JS currently looks like this:

<script type="text/javascript"> 

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

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

• Only the first loaded picture actually does what it should be doing (button is hiding, form submitted etc.)
• For the following pictures, the JS doesn't work, they just follow the normal HTML form - when clicking the ban button, we are redirected to banPeopleProcess.php.
• With that said it seems like only the first photo id gets loaded with the JS, and the others not. I still don't know what to try.

Help greatly appreciated guys!!

Use different id for each picture. use different form id and submit id for each picture. Make dynamic the javascript id as well as followed $('#banPeopleBtn'+id).hide(); As javascript can not work with same id in same page.

You should prevent form from submitting php file and use ajax for calling your php.something like that

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

        });
    });