I am trying to call the .ajax() method when a button with id=go is clicked. This button is displayed when another jQuery event is triggered, namely that a button with a class called predicate is clicked.

The button with id=go is displayed without any problems but on clicking it, there is no call to the alert() or getResults() method which are supposed to occur. Howver if I hard code the button with id=go into the page and don't have it generated by jQuery then the thing works fine.

Why does the generated code cause a problem.

$(document).ready( function() {
    $(".predicate").click( function() {
        makeQuery(this.id);
        //alert(this.id);
        });
    $(".object").click( function() {
        //alert(this.id);
        });
    var variables = 0;
    var queryString = "";
    var noOfResults;
    var formValues="";
    var goBegin = "";
    var goEnd = "<br/><input name='go' id='go' type='button' value='go'/>";
    function makeQuery(value) {
        queryString = queryString + "val" + variables + "=" + value + "&";
        formValues=formValues+"<input type='hidden' name='val"+variables+"' value='"+value+"' />";
        variables = variables + 1;
        $("#resultCount").html(goBegin+formValues+queryString+goEnd);           
    }
    function getResults(){
        $.ajax( {
            type : "GET",
            url : "ObjectCount",
            data : queryString + "count=" + variables,
            success : function(results) {
                noOfResults = results;
                $("#resultCount").html(results - 1 + " results");
            }
        });
    }
    $("#go").click( function() {
        alert("We have been alerted");
        getResults();
        });
});