How can I retrieve jQuery change events from dynamic form elements in PHP?

Question

In order to choose categories, I want to use dropdown lists. Each list contains one level of categories. So it's: top level, sub, subsub, subsubsub etc. Every level is dynamically retrieved through my script getcat.php, which shows a <select> object.

The retrieval so far works with the following code. However, since it's a form, I want to get the last selected value so I can have the category id. This is not working for me. I tried $("select:last option:selected"), but that's not working with newly inserted elements.

After selecting the category, an input field must show up where the user can make his own subcategory (inside the category selected). This, too, is not working with the new elements.

Now, I tried to play with .live but that doesn't support change events. Do you guys have any tips on how to improve it?

Currently I've got the following code:

$("select").bind("change", function(){
    $(this).nextAll().remove();
    var value = $(this).val();
    $("#currentcat").val(value);
    if($("select:last option:selected").hasClass('makenew')) {
        $("#newcat").show();
    }
    else if($("select:last option:selected").hasClass('disabled')) { }
    else {
    $.get("getcat.php", { c: value },
        function(data){
            $("#getcats").append(data);
        });
    $("#newcat").hide();
    }    
});

However, as you can see, it's not a beauty.

Answer 1

Are you re-binding the onchange event to the new select box?

Answer 2

If you want new <option>s to be bound to the DOM and work across different browsers, I would suggest appending them to your select using document.createElement and document.createTextNode like so:

var opt = document.createElement('option');
opt.value = "someValue";
opt.appendChild(document.createTextNode("someText"));
$('#currentcat').append(opt);

So instead of using $.get you should probably use $.getJSON to fetch a JSON object containing the values and text attributes of the options you will be appending to your select. The JSON object retrieved from the server should look like this:

                { "options" : [   
                                    { "text" : "Fishing",  // First element
                                      "value"  : "5" },
                                    
                                    { "text" : "Skiing",  // Second Element
                                      "value"  : "70" }
                               ]
                }

Iterating over the object would look something like this:

$.getJSON("getcat.php", { c: value }, function(json) {
    var $select = $('<select></select>).attr('id','currentcat').attr('name','currentcat').hide(); 
    $.each(json.options, function(i, item) {
        var opt = document.createElement('option');
        opt.value = item.value;
        opt.appendChild(document.createTextNode(item.text));
        $('#currentcat').append(opt);        
    });
    $("#newcat").hide();
    $('#someDiv').append($select).show();
}); 

The above is not tested, and reflects my understanding of your question. Hope that helps.