Question

Hi i am trying to create dropdownlists dynamically and populating the contents via an ajax call, this sort of works in the sense that the drop down is created and populated as required but its ‘change’ event does not fire. I am posting the code below, if anyone can spot something obvious, can you please let me know
regards

$(document).ready(function () {

 $("#positions select").change(function (e) {
    alert("in");
    var id = $("#category_id").val();
    $.getJSON("/Category/GetSubCategories/" + id, function (data) {
    if (data.length > 0) {

        alert(data.length);
        var position = document.getElementById('positions');
        var tr = position.insertRow(7);
        var td1 = tr.insertCell(-1);
        var td = tr.insertCell(-1);
        var sel = document.createElement("select");
        sel.name = 'sel';
        sel.id = 'sel';
        sel.setAttribute('class', 'category');

        td.appendChild(sel);
        $.each(data, function (GetSubCatergories, category) {
        $('#sel').append($("<option></option>").
       attr("value", category.category_id).
      text(category.name));

        });
    }
    });
    });
 }); 

Answer 1

If your drop down is dynamically generated then you have to bind the change event using .live() handler. live() attaches a handler to the event for all elements which match the current selector, now or in the future.

$("positions select").live("change", function(){
});

Edit

To get the id

$(this).attr("id");

To get value

$(this).val();

To get class name

$(this).attr("class");

inside the change event handler.