javascript - jQuery .on() does not trigger any events

I am writing an application using jQuery, where when a button is clicked, a select box is generated and appended to a row. Whenever the select changes, it should trigger the change event, but using .on("change", function() {}); isn't working:

Code:

Any idea's what I'm doing wrong?

Answer

As $(".member-type") is empty when you do the binding, you're not doing anything.

Change

$(".member-type").on("change", function() {
       alert("changed");
});

to

$(document).on("change", ".member-type", function() {
         alert("changed");
});

or this because the #Container element is static:

$("#Container").on("change", ".member-type", function() {
         alert("changed");
});