Hi everyone, I have a problem with the returned data from a ajax request. Basically when I click on a link it runs a ajax request to load some html into a div, that part is working fine the problem comes when the data has been loaded.

Part of the html loaded is a form, this form works fine if I load the page directly but when it is loaded through ajax into the div it wont submit but the rest of the links in the html work fine.

Here is the code that requests the remote html data:

// Ajax to load image editing page
$('a.editpicture').click(function(e) {
    e.preventDefault();
    var picture = $(this).attr("id")

    $.ajax({
        url: 'http://localhost/digital-xposure/index.php/members/viewpicture/' + picture,
        success: function(data) {
            $('#update-picture').html(data);
        }
    });
});

This is the form it loads:

<form method="post" id="updatepicture" name="updatepicture" action="http://localhost/digital-xposure/index.php/members/editpicture"/>

        <p>Title<input type="text" name="title" id="title" style="input" value="<?php echo $title; ?>"></P>
        <p>Album<?php echo $albums;?></p>
        <p>Description<textarea name="description" id="description" cols="50" rows="5"><?php echo $description; ?></textarea></P>
            <input type="hidden" name="filename" id="filename" value="<?php echo $filename; ?>" />
        <input type="button" name="update-submit" id="update-submit" value="Update details" class="button"> Or <input type="button" onClick="location.href='<?php echo base_url(); ?>index.php/members/deletepicture/<?php echo $filename; ?>'" value="Delete picture" class="button">

    </form>

Any ideas why the form wont submit after being loaded into the div? Any help is greatly appreciated, thanks.

Calum