jQuery ajax link, returned data includes a from that wont submit

Question

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"/&gt;

        <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

Answer 1

instead of using the .click syntax

try rewriting your events as

$('.selector').live('click', function(){....});

Answer 2

Do a view source to verify the rendered HTML is there.

If you don't find it, check generated source (Firefox web developer add-on has this feature) to verify the whether or not the generated HTML is present.

Answer 3

Your form is self closing:

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

Try this instead:

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

Firefox might detect it during usual runtime, then fail to detect it when its embedded using script.

Good luck.