Question

I am using JavaScript to generate some HTML tables on the fly. After filling out this dynamic table, I employ jQuery to ‘grab’ some of the inputs and do some small calculations for form validation. However, my jQuery selector does not work with the dynamic HTML form. Can anyone give me some suggestions? Thanks!

Here is the code:

<script>
//generate HTML table
$('<tr><th><label for="id_CAM_1">Input:</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'"><option value="1">Option 1</option><option value="2">Option 2</option></select></td></tr>').appendTo('.table');

// jQuery selector, which does not work dynamically

$('select[name=CAM_1_'+i+']').change(function() {
            var ss1=$(this).val()
            alert(ss1)})
</script>

Answer 1

The following will detect all changes of all select elements that have a name that starts with CAM_1_ in your tableSelector

$('tableSelector').on('change', 'select[name^="CAM_1_"]', function() {
    alert(this.value);
});