Why does the change event never fire on a select box?

Question

I've 3 list box like this one with a different id and name:

<div class="col-md-4 column">
    <div class="form-group">
       <input type="hidden" name="identityCardList[0].identityCardId">
       <label for="identityCardType1" class="col-sm-3 control-label">Type</label>
       <div class="col-sm-9">
           <select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
           </select>
       </div>
   </div>

   <div class="form-group">
       <label for="idCardValue1" class="col-sm-3 control-label">Valeur</label>
       <div class="col-sm-9">
           <input type="text" class="form-control" id="idCardValue1" name="identityCardList[0].value" placeholder="Entrer la valeur">
       </div>
   </div>

   <div class="form-group">
       <label for="expirationDateCard1" class="col-sm-3 control-label">Expiration</label>

       <div class="col-sm-9">
           <div class="input-group date" id="expirationDateCardPicker1">
               <input type="text" id="expirationDateCard1" name="identityCardList[0].expiration" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
           </div>
       </div>
   </div>

   <div class="form-group">
       <div class="col-sm-offset-3 col-sm-9">
           <div class="checkbox">
               <label><input type="checkbox" name="identityCardList[0].lodgerOwn" value="">Garde sur eux</label>
           </div>
       </div>
   </div>
</div>

<div class="col-md-4 column">
...
</div>

<div class="col-md-4 column">
...
</div>

In the list box, I've this kind of value:

<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
    <option value=""></option>
    <option value="1" data-card-expiration="false">Certificat de naissance</option>
    <option value="2" data-card-expiration="false">N.A.S</option>
    <option value="3" data-card-expiration="true">N.A.M</option>
</select>

When I select a value in the list box, I'd like to read the data-card-expiration value and disable expiration input text if needed.

This is my generic attempt:

$("select[id^='identityCardType']").on('change', 'select', function (e){
    debugger;
    if($(e.target).data("data-card-expiration")){
        //disabled the nearest component expirationDateCard after this select
    }
});

Why does the change event never occur?

Answer 1

You don't need to pass the selector 'select' to .on() just remove it. the selector filters the descendant of element.

$("select[id^='identityCardType']").on('change', function (e){ //Removed 'select'       
});

Answer 2

Try this easy code

$("select#identityCardType1").on('change',  function (e){

    if($(this).data("cardexpiration")){
        //disabled the nearest component expirationDateCard after this select
    }
});