Reputation: 145
I have a button to add dynamically new divs and this divs contains a select:
<script type="text/javascript">
var counter = 1;
var limit = 10;
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter
+ " inputs");
} else {
var newdiv = document.createElement('div');
newdiv.setAttribute("id", 'filter'+counter);
newdiv.innerHTML = "<br><div class='widget-content'>Filter" + (counter) + "<br> <select id='selecto'><option>Flowers</option><option>Shrubs</option><option>Trees</option><option>Bushes</option></select></div> ";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
I want to handle an event when I select one option, I've tried this but hasn't worked:
$('#selecto').change(function(){
var value = $(this).val();
alert(value);
});
Why didn't work? Thx a lot.
Upvotes: 0
Views: 60
Reputation: 77482
Use need use event delegation
$('body').on('change', '#selecto', function() {
var value = $(this).val();
alert(value);
});
Upvotes: 2