Jquery select change not firing

Question

I need to capture when a select box changes, should be simple!

    $('#multiid').change(function(){     alert('Change Happened'); }); 

But it does not work, I suspected the problem is that the select box does not exist on document ready it is created only if needed, so I created it empty in HTML, populated it with code as a test but that didn't work either.

function buildmulti(id,name,price) {     // build action items for action bar     var optlist = $('<select></select>').attr('id', 'multiid').attr('name', 'multiid');     optlist.append('<option value="0">Select Size</option>');     $.each(option, function(index, val) {         if(val.prodID *1  == id * 1) {             v = val.ID;             fprice = price * 1 + val.pricechange * 1;             t = name + ' - ' + val.variation +  ' - ' + currency + (fprice).toFixed(2);             optlist.append('<option value="' + v + '">' + t + '</option>');         }     })     $('#addbasket').append(optlist); }; 

it's probably another bracket out of place, but I can't find it!

Answer 1

Try

 $(document).on('change','#multiid',function(){     alert('Change Happened'); }); 

As your select-box is generated from the code, so you have to use event delegation, where in place of $(document) you can have closest parent element.

Or

$(document.body).on('change','#multiid',function(){     alert('Change Happened'); }); 

Update:

Second one works fine, there is another change of selector to make it work.

$('#addbasket').on('change','#multiid',function(){     alert('Change Happened'); }); 

Ideally we should use $("#addbasket") as it's the closest parent element [As i have mentioned above].