Jquery 在动态创建的下拉菜单上调用 onchange 函数

Question

如何在动态创建的下拉菜单上调用 onchange 函数。代码如下： HTML 代码：

<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 函数正在调用，但 onchange 没有调用。我该怎么做？

Answer 1

在你的代码中改onchange来改！另外，因为元素是动态创建的，所以更好用：

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

你的情况：

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

Answer 2

事件是 'change'，而不是 'onchange'。

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

Answer 3

看一下代码：您错过了结束符“>”和结束符 "</select>"

$(document).ready(function(){
 $(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));
});
}

Jquery 在动态创建的下拉菜单上调用 onchange 函数

Jquery Call onchange function on dynamically created dropdown

javascript

jquery

jsp

onchange

dropdown