[英]Jquery Call onchange function on dynamically created dropdown
How to Call onchange function on dynamically created dropdown. 如何在动态创建的下拉菜单上调用onchange函数。 Code is like below : HTML Code :
代码如下: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 使用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 function is calling but onchange is not calling. onblur函数正在调用,但onchange没有调用。 How can i do this ?
我怎样才能做到这一点 ?
In your code change onchange to change! 在您的代码中更改onchange即可更改! Also, because the element is dynamically created is better to use:
另外,由于该元素是动态创建的,因此最好使用:
$(document).on(event, element, handler)
In your case: 在您的情况下:
$(document).on('change', '#'+dropDownIdStr, function () {
alert("getElementById...."+document.getElementById(dropDownIdStr));
});
The event is 'change', not 'onchange'. 事件是“更改”,而不是“ onchange”。
$('#' + dropDownIdStr).on('change', function () {
alert("getElementById...." + document.getElementById(dropDownIdStr));
});
Take a look at the code: You missed the closing ">" and the closing "</select>"
看一下代码:您错过了结尾的“>”和结尾的
"</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)); }); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.