jQuery - Unable to select dynamincally generated content

Question

It works only on the first row, but not on the subsequently generated rows. Jquery.

$(".ser_code").change(function () {
    var text = $(this).val();
    alert(text);
});

This is the HTML.

<li class="receipt-item" id="row_1">
    <ul class="browser-actions-receipt">
        <li class="receipt-type">
            <select name="ser_code[]" id="ser_code_1" class="ser_code">
                <option selected disabled hidden value>Item Type</option>
                @foreach ($options as $b => $a)
                    <option value="{{ $a['sch_code'] }}">{{ $a['eng_desc'] }}</option>
                @endforeach
            </select>

Answer 1

use .on() :

$(document).on('change','.ser_code',function () {
var text = $(this).val();
alert(text);
});

Answer 2

Use on() method in Jquery for dynamic content generation.

$('.ser_code').on('change', function () {
    var text = $(this).val();
    alert(text);
    });