Referencing HTML forms generated on the fly using JQuery html

Referencing HTML forms generated on the fly using JQuery html


Hi, I am generating an HTML form with radio buttons on-the-fly and when I try to catch a click event on one of those radio buttons, I am not successful.

I am working on a web page that leads a user to the environment he wants to be in by asking a series of questions where the answers are specified by selecting a serions of radio buttons. For example, suppose there are 3 attributes that specify what environment the user wants to be in. Lets call them attributes A, B and C. The following table shows 27 possible environments the user can specify. For example, if the user wants to be in envirionment 13, he must answer A=1, B=4 and C=13.

A = 1
    B = 4
        C = 13
        C = 14
        C = 15
    B = 5
        C = 16
        C = 17
        C = 18
    B = 6
        C = 19
        C = 20
        C = 21
A = 2
    B = 7
        C = 22
        C = 23
        C = 24
    B = 8
        C = 25
        C = 26
        C = 27
    B = 9
        C = 28
        C = 29
        C = 30
A = 3
    B = 10
        C = 31
        C = 32
        C = 33
    B = 11
        C = 34
        C = 35
        C = 36
    B = 12
        C = 37
        C = 38
        C = 39

What I have written so far is a form with radio buttons in html. The form comes up as expected and lets the user specify the value for attribute A as being "1", "2" or "3". If the value "1" is selected, I use JQuery to catch the click and run an anonymous function. That function generates a 2nd form with an 'id' attribute with a value "attributeAattributeBform". That form actually does get displayed in my browser and lets the user specify the value for attribute B as being "4", "5" or "6". I would like to catch the click event on attribute B's values and then use the anonymous function for that event to generate the next form with radio buttons for attribute C.

Unfortunately, when I click on a button in that 2nd form, the event does not get caught. I am wondering if the order in which my code runs is the problem. The order seems like it would be:

    1) my web page is published by the browser and the form for attribute A is part of that page

        It looks something like:

            Attribute A:   o 1  o 2  o 3        <--- This is the form with radio buttons where nothing has                                                         been selected yet.

    2) when the page is completed, the <script>  part of the page is run and the JQuery
        $(document).ready(function() {...}) is called.
    3) As part of the ready function, a function $('#A').click(function{...}) is DEFINED. This function
        creates the form with radio buttons for attribute B with values of "4", "5" and "6". This form
        has an id="attributeAattributeBform" so that it can be referenced. Note, this function is not
        run until the proper click event occurs.
    4) As part of the ready function, a function $('#attributeAattributeBform').click(function{...}) is
        DEFINED. This function is not complete yet, but when complete it will create the form with
        radio buttons for attribute C with values of "4", "5" and "6". This form has an                 id="attributeAattributeBattributeCform"
        so that it can be referenced. Note, this function is not run until the proper click event occurs.
    5) The user clicks on attribute radio button for the value "1" and the anonymous function for item 3, above,
        is run. The form is generated and displayed on my browser by the call to this function. Note that form id
        is also generated at this time and has the value of 'attributeAattributeBform'

        It looks something like:

            Attribute A:   x 1  o 2  o 3        <--- This is the form with radio buttons, where choice '1' is selected
                                                     As a result of select '1', the radio buttons below are displayed.

            Attribute B:   o 4  o 5  o 6        <--- This is the form with radio buttons, where no selection has been
                                                        made.

    6) The user clicks on attribute radio button for the value "4" and the anonymous function for item 4, above,
        is run when the click event is caught. Unfortunately, this is the event that is not being caught so the
        new form should be generated and displayed by the call to this function, is not called nor implemented
        yet. I have a alert() method call planted in this anonymous function, but it is never called.

        When complete it should look something like:


            Attribute A:   x 1  o 2  o 3        <--- This is the form with radio buttons, where choice '1' is selected
                                                     As a result of select '1', the radio buttons below are displayed.

            Attribute B:   x 4  o 5  o 6        <--- This is the form with radio buttons, where choice '4' is selected.

            Attribute C:   o 13  o 14  o 15     <--- This is the form with radio buttons, where no selection has been
                                                        made.

I am questioning whether the form object, i.e. the form with id="attributeAattributeBform" actually gets
referenced when the reference is made to it in item 4. When item 4 is run, it references the form with
id="attributeAattributeBform", but the function that defines this form has only been defined, it has not
been run yet. I can imagine an implementation the anticipates the later creation of the object and
completes the mapping reference when the object is created. I can also imagine an implementation where
the reference is created but it points to an empty object, not to the desire object that is created later.

Can anyone advise me if what I am attempting should work? I am trying to decide whether to continue to
debug this problem or move to a different approach.

Jim Anderson