Javascript Jquery无法处理添加的表行（追加）

我正在做一些事情，如果可以向表中添加一行（tr），并且添加的行响应另一个Jquery脚本。其思想是：当选择一个选项时，将显示内容。但是，这在添加的行上不起作用。你怎么能解决这个问题

这是我的html标记

<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();
    });
});

jQuery（函数（）{
var计数器=1；
jQuery（'a.add-highlight'）。单击（函数（事件）{
jQuery（'table.highlights'）.append（'Select a highlight goalyellow CardRed cards substitution Lionel MessiNeymarIniesta Lionel MessiNeymarIniesta Lionel MessiNeymarIniesta Lionel MessiNeymarIniesta Lionel MessiNeymarIniesta Lionel MessiNeymarIniesta'）；
});
jQuery（“table.highlights”）。在（'click'，'row remove alt'，函数（事件）{
$（this）.closest（'tr'）.remove（）；
});
});
$（函数（）{
$（'.selectOption'）.change（函数（）{
所选变量=$（this.val（）；
$（“.desc”）.hide（）；
$（'#'+$（this.val（））.show（）；
});
});

尝试在运行时创建的元素上使用

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