Question

所以我对这个问题感到困惑。我在使用它时复制了这个选择。目标是让更多的球员加入球队。如果他们添加一个，它会创建另一个选择。如果他们添加第二个玩家，则创建第三个选择。

目前，只有在第一次选择更改时，它才会重复。在解析和绑定javascript之后，不应该.on()适用于动态创建的所有元素吗？我该如何制作它只适用于最近添加的select？提前感谢您的时间！

JQuery的

$(document).ready(function(){
    another = $('#addplayers');
    $('.addplayer').on('change', function(){
        another.clone().removeAttr('id').appendTo($(this).closest('.form-horizontal'));
        $(this).removeClass('addplayer');
    });
});

HTML

<div class="form-group" id="addplayers">
                        <label class="col-sm-2 control-label">Add Player</label>
                        <div class="col-sm-10">
                            <select class="addplayer" team="<%=@team.id%>">
                                <%@players.each do |player|%>
                                    <option value="<%=player.id%>"><%=player.name%></option>
                                <%end%>
                            </select>
                        </div>
                    </div>

Answer 1

您需要使用以下方法为 event delegation 应用正确的语法：

$(document.body).on('change', '.addplayer', function(){

而不是：

$('.addplayer').on('change', function(){

.on（）不适用于动态创建的元素

1 个答案: