Question

我正在做的事情是应该可以在表中添加一行（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();
    });
});

Answer 1

尝试对运行时创建的元素使用event-delegation

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

Jquery没有处理添加的表格行（追加）

1 个答案: