Jquery not working on added table line (append)

Question

I'm working on something were it should be possible to add a line (tr) to a table and the added line responds to another Jquery script. The idea is: when a option is selected, content is shown. However this doesn't work on added line. How can you fix this?

This is my html markup.

<table class="full highlights">
<tr class="report-line">
<td class="float-left margin-top">
<input type="text" class="form-control-form input-tiny margin-right" placeholder="mm">
</td>
<td class="report-players-alt float-left margin-bottom margin-top">
<span class="report-players-icon bowders-left"><i class="fa fa-thumb-tack"></i></span><select class="form-control-select-alt margin-bottom bowders-right selectOption"><option value="0">Select a highlight</option><option value="Goal">Goal</option><option value="Yellow">Yellow Card</option><option value="Red">Red Card</option><option value="Sub">Substitution</option></select>
<div id="Goal" class="desc">
<span class="report-players-icon bowders-left"><i class="fa fa-user"></i></span><select class="form-control-select-alt bowders-right"><option>Lionel Messi</option><option>Neymar</option><option>Iniesta</option></select>
</div> 
<div id="Yellow" class="desc">
<span class="report-players-icon bowders-left"><i class="fa fa-user"></i></span><select class="form-control-select-alt bowders-right"><option>Lionel Messi</option><option>Neymar</option>    </div> 
<div id="Red" class="desc"><span class="report-players-icon bowders-left"><i class="fa fa-user"> </i></span><select class="form-control-select-alt bowders-right"><option>Lionel Messi</option><option>Neymar</option><option>Iniesta</option></select></div> 
<div id="Sub" class="desc"><span class="report-players-icon bowders-left"><i class="fa fa-arrow-circle-left font-red"></i></span><select class="form-control-select-alt margin-bottom bowders-right"><option>Lionel Messi</option><option>Neymar</option><option>Iniesta</option></select>
<span class="report-players-icon bowders-left"><i class="fa fa-arrow-circle-right font-green"></i></span><select class="form-control-select-alt bowders-right"><option>Lionel Messi</option><option>Neymar</option><option>Iniesta</option></select>
</div>
</td>
<td class="row-remove-alt pointer"><i class="fa fa-times-circle"></i></td></tr>
</table>

Jquery.

jQuery(function(){
    var counter = 1;
    jQuery('a.add-highlight').click(function(event){
        jQuery('table.highlights').append('<tr class="report-line"><td class="float-left margin-top"><input type="text" class="form-control-form input-tiny margin-right" placeholder="mm"></td><td class="report-players-alt float-left margin-bottom margin-top"><span class="report-players-icon bowders-left"><i class="fa fa-thumb-tack"></i></span><select class="form-control-select-alt margin-bottom bowders-right selectOption"><option value="0">Select a highlight</option><option value="Goal">Goal</option><option value="Yellow">Yellow Card</option><option value="Red">Red Card</option><option value="Sub">Substitution</option></select><div id="Goal" class="desc"><span class="report-players-icon bowders-left"><i class="fa fa-user"></i></span><select class="form-control-select-alt bowders-right"><option>Lionel Messi</option><option>Neymar</option><option>Iniesta</option></select></div><div id="Yellow" class="desc"><span class="report-players-icon bowders-left"><i class="fa fa-user"></i></span><select class="form-control-select-alt bowders-right"><option>Lionel Messi</option><option>Neymar</option><option>Iniesta</option></select></div> <div id="Red" class="desc"><span class="report-players-icon bowders-left"><i class="fa fa-user"></i></span><select class="form-control-select-alt bowders-right"><option>Lionel Messi</option><option>Neymar</option><option>Iniesta</option></select></div><div id="Sub" class="desc"><span class="report-players-icon bowders-left"><i class="fa fa-arrow-circle-left font-red"></i></span><select class="form-control-select-alt margin-bottom bowders-right"><option>Lionel Messi</option><option>Neymar</option><option>Iniesta</option></select><span class="report-players-icon bowders-left"><i class="fa fa-arrow-circle-right font-green"></i></span><select class="form-control-select-alt bowders-right"><option>Lionel Messi</option><option>Neymar</option><option>Iniesta</option></select></select></td><td class="row-remove-alt pointer"><i class="fa fa-times-circle"></i></td></tr>');
    });
    jQuery("table.highlights").on('click','.row-remove-alt',function(event){
        $(this).closest('tr').remove();
    });
});

$(function(){
    $('.selectOption').change(function(){
        var selected = $(this).val();
        $(".desc").hide();
        $('#' + $(this).val()).show();
    });
});

Answer 1

Try to use event-delegation on the elements those are created at runtime,

$('table.highlights').on('change','.selectOption',function(){