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

i've 3 list box 1 different id , 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 list box, i've 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 select value in list box, i'd read data-card-expiration value , disable expiration input text if needed.

this generic attempt:

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

why change event never occur?

you don't need pass selector 'select' .on() remove it. selector filters descendant of element.

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