jQuery Click event on object added with JavaScript not working.

Question

I'm work on a quiz for school but I've bumped into a problem. I got a javascript file for custom radio buttons (CUSTOM FORM ELEMNTS by Ryan Fait if it's helping). The script hides the input buttons and adds custom styled spans instead.

Now what I want, when I click one of these JavaScript added spans I want to remove disabled for a button called "Next Question" which when pressed takes you to the next question. The reason for this is that I don't want people to accidently got to the next question without choosing a answer. The problem is when I press the added spans nothing happens but when I press another identical span which I have added in the html it works just as intended.

The span got the class radio which is the class I'm looking for in the jQuery.

Here's the test page with the error on: http://hultner.se/graphicsquiz/livetest/livetest.php

Short: Can't get jQuery .click() functions to work with spans added using JavaScript earlier in the document.

Answer 1

You are looking for jQuery's live() function. You would do something like:

$(".radio").live("click", function() {
    // Enable the button here
});

Your other option would be to use the new delegate() function if you have jQuery 1.4.2 included on your page. Similar syntax, however, it only scans within the element it's called on for child elements of the kind you want to bind an eventListener to and I believe it has much less of a performance impact on large pages. (Not applicable in your case, but it's always good to practice with the best tools.)

$("element_containing_radio_buttons").delegate(".radio" "click", function() {
   // Enable the button here
});