71

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!

Pete Ravenscroft
  • 761
  • 1
  • 6
  • 9
  • possible duplicate of [jQuery On – Ram Oct 05 '13 at 05:05

7 Answers7

203

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

Dhaval Marthak
  • 17,246
  • 6
  • 46
  • 68
11

Try this

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

please check .on() selector

Anil kumar
  • 4,107
  • 1
  • 21
  • 36
11

You can fire chnage event by these methods:

First

$('#selectid').change(function () {
    alert('This works');
});

Second

$(document).on('change', '#selectid', function() {
    alert('This Works');
});

Third

$(document.body).on('change','#selectid',function(){
    alert('This Works');
});

If this methods not working, check your jQuery working or not:

$(document).ready(function($) {
   alert('Jquery Working');
});
Prince Patel
  • 2,990
  • 1
  • 21
  • 28
  • The second is best, it works in all conditions. On the first time page loaded and dynamically some changes in the page using ajax or jquery. It is work fine. Thanks – Assad Yaqoob Mar 17 '22 at 07:24
3
$(document).on('change','#multiid',function(){
  // you desired code 
});

reference on

Rituraj ratan
  • 10,260
  • 8
  • 34
  • 55
1

This works for me! 

$('#<%= ddlstuff.ClientID %>').change(function () {
    alert('Change Happened');
     $('#<%= txtBoxToClear.ClientID %>').val('');
});
Tunaki
  • 132,869
  • 46
  • 340
  • 423
dsf
  • 19
  • 1
  • Note that the ID portions, ex. `<%= ddlstuff.ClientID %>` .... are specific to ASPX Razor syntax. – vapcguy Oct 19 '21 at 00:05
0

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

Melistraza
  • 47
  • 3
0

You can try the following, it should work

$(document).on('change','#fieldid',function(){
    alert('change triggered');
});
Deepak
  • 185
  • 2
  • 9