Jquery select change not firing

JqueryOnchange

Jquery Problem Overview


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!

Jquery Solutions


Solution 1 - Jquery

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].

Solution 2 - Jquery

Try this

$('body').on('change', '#multiid', function() {
	// your stuff
})

please check .on() selector

Solution 3 - Jquery

You can fire

Solution 4 - Jquery

$(document).on('change','#multiid',function(){
  // you desired code 
});

reference on

Solution 5 - Jquery

This works for me!

$('#<%= ddlstuff.ClientID %>').change(function () {
    alert('Change Happened');
     $('#<%= txtBoxToClear.ClientID %>').val('');
});

Solution 6 - Jquery

For me perfectly fork this code.

$('#dom_object_id').on('change paste keyup', function(){
    console.log($("#dom_object_id").val().length)
});

Key event for .on() function is "paste" to get changes dynamically

Solution 7 - Jquery

You can try the following, it should work

$(document).on('change','#fieldid',function(){
    alert('change triggered');
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPete RavenscroftView Question on Stackoverflow
Solution 1 - JqueryDhaval MarthakView Answer on Stackoverflow
Solution 2 - JqueryAnil kumarView Answer on Stackoverflow
Solution 3 - JqueryPrince PatelView Answer on Stackoverflow
Solution 4 - JqueryRituraj ratanView Answer on Stackoverflow
Solution 5 - JquerydsfView Answer on Stackoverflow
Solution 6 - JqueryMelistrazaView Answer on Stackoverflow
Solution 7 - JqueryDeepakView Answer on Stackoverflow