Question

I have a form embedded in a web page. When the user clicks submit the XHR response is either a form with all fields reset (i.e. upon success), or a form with error messages (i.e. upon failure). I use the response to overwrite the existing form.

This works the first time the user submits the form. If they submit a second time however, the problem is that the form is posting a full HTTP request.

In the web page the form is wrapped in a span, #add-container. The button within the form is #add-button.

Per the code below, I am trying to re-bind a function to the click event of the buttom whenever the content in the span changes. It seems that this works the first time (i.e. when the document loads), but not subsequent times (i.e. when the XHR response is loaded into the page).

// Add product and services
$(document).ready(function() {
    $("#add-container").change(prepareAddForm());
});

function prepareAddForm() {
    var uri = '/product/add/org/4/format/html';

    $("#add-button").click(function() {
        $("#add-container").load(uri, {language: "php", version: 5});
        return false;
    });
}

Any ideas? Thanks for your assistance…

Answer 1

Sorry – just sorted it out. Needed to use the .live() method!