Question

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.

The generated HTML looks like this:

<div id="resultCount"><input name="val0" value="3" type="hidden">
val0=3&amp;<br><input name="go" id="go" value="go" type="button"></div>

Why does the generated code cause a problem, when if I hard code the button onto the page it doesn’t cause a problem. The $(“.object”)…. can be ignored, for the time being I am only triggering $(“.predicate”)….

$(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();
        });
});

Answer 1

The problem is that you assign the click event before you insert the element with id=go in the DOM …

so the event cannot be assigned ..

either use live or assign the event right after creating the element. After the $("#resultCount").html(goBegin+formValues+queryString+goEnd);.. but inside the same function makeQuery ..