I have created, dynamically, input text field when an option of multiple select list is selected. The problem is those input fields does not respond to events of Jquery.
Here is the code I used:
<form>
Select from the multiple select menu to generate input fields<br>
<select id="sel" multiple="multiple">
<option value="1">Tomato</option>
<option value="2">Banana</option>
<option value="3">Apple</option>
<option value="4">Orange</option>
</select>
<div id="panel">
</div>
</form>
<script type="text/javascript">
if (!window.jQuery) alert('Jquery is missing');
$(document).ready(function() {
var e = new Array();
$("#sel").change(function(event) {
str = '';
$( "#sel option:selected" ).each(function() {
//str += $( this ).val() + " ";
//"+$( this ).val()+"
i = $(this).index();
str += "<input title='"+i+"' type='text' value='"+((e[i])? e[i]: '')+"' name='n'><br />"
});
$( "#panel" ).html( str );
});
$('input').change(function(event) {
alert('hi');
});
});
</script>
<br />
<hr />
<input value="sdsd" type="text" /> This is orginally created and works fine, but the generated above do not work with change event
This is an online working DEMO.