jQuery on change, bound to document but element in third parameter will give empty value?

Question

This is the fiddle for the issue:

http://jsfiddle.net/PdA4W/4/

Alert is empty (no value), when the select changes.

This is, I think because I have this line:

$(document).on('change', '.variant', function()

Now I cannot do it differently, according to my previous question:

Appended select with jQuery, delegate/on event not working

I need to do it this way, because that I am cloning the variant div element each time you press Add

So how can I obtain the current selected option value in the select that are changing?

Answer 1

Change

$(document).on('change', '.variant', function(){

to

$(document).on('change', '.quantity', function(){

DIV doesn't listen to jQuery's 'change' event in the way you're thinking; only SELECT elements (and I think a couple other elements) do. Is that what you're looking for?

Answer 2

You are trying to add a change handler to a <div> not <select>

Modify the selector to target the <select>

$(document).on('change', '.variant select.quantity', function(){
     alert( $(this).val() );
});

DEMO

Answer 3

The change is in quantity. Look here: http://jsfiddle.net/JY3fC/

    $(function(){
        $('.add_variant').on('click', function(){
            var $orig = $('.variants div:first').clone();

            $('.variants').append($orig);
        });
        $(document).on('change', '.quantity', function(){
            alert( $(this).val() );
        });
    });