Fonction Jquery Call onchange dans une liste déroulante créée dynamiquement

Question

Comment appeler la fonction onchange dans une liste déroulante créée dynamiquement. Code est comme ci-dessous: HTML Code:

<img id="addColumn" src="images/icons/panel_add.gif" alt="Add Column" onclick="addColumnDynamically('q_123_456_789')"/> 
<div class = "q_123_456_789"></div> 

Javascript

function addColumnDynamically(currentObjId){ 
maxRepeatedColumnSeq = maxRepeatedColumnSeq+1; 
var dropDownIdStr = currentObjId; 
dropDownIdStr = dropDownIdStr.substring(dropDownIdStr.indexOf("_") + 1);; 
dropDownIdStr = "q_drop_"+dropDownIdStr+"_"+maxRepeatedColumnSeq; 
alert("idStr........"+dropDownIdStr); 
$("."+currentObjId).append('<div class="Content22">\ 
     <br>\ 
     <input class="input numberElement" type="text" style="width: 25%" id='+currentObjId+"_"+maxRepeatedColumnSeq+'>\ 
     <select class="selectStyle1" style="width: 25%" id='+dropDownIdStr+'<option value=""></option><option value=""></option><option value="Hours">Hours</option><option value="Days">Days</option><option value="Weeks">Weeks</option><option value="Months">Months</option><option value="Years">Years</option> >\ 
     <img src="images/icons/panel_remove.gif" onclick="removeColumn(this)">\ 
     <br>\ 
    </div>'); 
$('#'+currentObjId+"_"+maxRepeatedColumnSeq).on('blur', function() { 
alert("Hiii...."); 
}); 
alert("Hiii.."+dropDownIdStr); 
$('#'+dropDownIdStr).on('change', function() { 
alert("getElementById...."+document.getElementById(dropDownIdStr)); 
}); 
} 

onblur fonction appelle, mais onchange ne demande pas. Comment puis-je faire ceci ?

Answer 1

Jetez un oeil sur le code: Vous avez manqué la fermeture ">" et la fermeture "</select>"

$(document).ready(function(){ 
 
\t $(document).on('click', '#addColumn', function(evt){ addColumnDynamically('q_123_456_789')}); 
 
    
 
}) 
 

 
function addColumnDynamically(currentObjId){ 
 
var maxRepeatedColumnSeq = maxRepeatedColumnSeq+1; 
 
var dropDownIdStr = currentObjId; 
 
dropDownIdStr = dropDownIdStr.substring(dropDownIdStr.indexOf("_") + 1);; 
 
dropDownIdStr = "q_drop_"+dropDownIdStr+"_"+maxRepeatedColumnSeq; 
 
alert("idStr........"+dropDownIdStr); 
 
$("."+currentObjId).append('<div class="Content22">\ 
 
     <br>\ 
 
     <input class="input numberElement" type="text" style="width: 25%" id='+currentObjId+"_"+maxRepeatedColumnSeq+'>\ 
 
     <select class="selectStyle1" style="width: 25%" id='+dropDownIdStr+'><option value=""></option><option value=""></option><option value="Hours">Hours</option><option value="Days">Days</option><option value="Weeks">Weeks</option><option value="Months">Months</option><option value="Years">Years</option></select>\ 
 
     <img src="images/icons/panel_remove.gif" onclick="removeColumn(this)">\ 
 
     <br>\ 
 
    </div>'); 
 

 
alert("Hiii.."+dropDownIdStr); 
 
$('#'+dropDownIdStr).on('change', function() { 
 
alert("getElementById...."+document.getElementById(dropDownIdStr)); 
 
}); 
 
}

Answer 2

Dans votre code changer onchange pour changer! En outre, parce que l'élément est créé dynamiquement est préférable d'utiliser:

$(document).on(event, element, handler) 

Dans votre cas:

$(document).on('change', '#'+dropDownIdStr, function() { 
alert("getElementById...."+document.getElementById(dropDownIdStr)); 
}); 

Answer 3

L'événement est 'changement', pas 'onchange'.

$('#' + dropDownIdStr).on('change', function() { 
    alert("getElementById...." + document.getElementById(dropDownIdStr)); 
});