Why is my jQuery event not being triggered when the button is clicked?

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

Not an answer, exactly, but try this:

alert("Wiring up go button");
$("#go").click( function() {
    alert("We have been alerted");
    getResults();
    });
alert("go button wired!");

I've often found that a bug in the middle of my document.ready code, which doesn't always trigger an error, will leave half my stuff unwired.

Answer 2

As you generate the button dynamically, you need to bind the event using live(). Now, when you bind the button's event, the button doesn't exist yet and so won't work when needed. The .live() method will make sure that the given handler will work on all elements with the given selector, now or in the future.

So you need to use something like this:

$('#go').live('click', function() {
    getResults();
});

Which can also be simplified to this:

$('#go').live('click', getResults);

Answer 3

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 ..