jquery - 在 jquery 中使用动态添加的元素

Question

我在处理动态添加的元素时遇到了很大的麻烦。即使使用像其他 question 上建议的“.on()”选择器，我也无法从添加的元素中获取类或数据属性。我有这个表格:

    <div class="row">

        <div class="col-md-12">
            <form action="" class="form-horizontal" id="newVehicle" method="post" accept-charset="utf-8">

    <!-- First form-group -->

                <div class="form-group specs" data-class="specs">
                    <label for="" class="col-sm-2 control-label">Especificações</label>
                    <div class="col-sm-4">
                        <select class="form-control" name="specs[]">
                            <option></option>
                            <option data-target="new-equip">Novo equipamento</option>
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <div class="btn-group" role="group" aria-label="">
                            <a href="" class="btn btn-default btnNew"><span class="glyphicon glyphicon-pencil"></span></a>
                            <a href="" class="btn btn-default btnPlus"><span class="glyphicon glyphicon-plus"></span></a>
                        </div>
                    </div>
                </div>

<!-- Second form group -->

                <div class="form-group equips" data-class="equips">
                    <label for="" class="col-sm-2 control-label">Equipamento</label>
                    <div class="col-sm-4">
                        <select class="form-control" name="equips[]">
                            <option></option>
                            <option data-target="new-equip">Novo equipamento</option>
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <div class="btn-group" role="group" aria-label="">
                            <a href="" class="btn btn-default btnNew"><span class="glyphicon glyphicon-pencil"></span></a>
                            <a href="" class="btn btn-default btnPlus"><span class="glyphicon glyphicon-plus"></span></a>
                        </div>
                    </div>
                </div>

            </form>
        </div>

    </div>

我试图在按“.btnNew”时添加新的表单组，属性名称与之前的元素相同。它仅适用于第一个元素，但对添加的元素不起作用。

我的 JavaScript:

$('#newVehicle').on('click', '.btnMinus, .btnNew, .btnPlus',function(event) {
    event.preventDefault();
    /* Act on the event */
    var formGroupClass = $(this).closest('.form-group').attr('data-class');
    console.log($(this).closest('.form-group').attr('class'));
    if($(this).hasClass('btnMinus')) {
        if($(this).closest('.form-group').is('.' + formGroupClass + ':first-child')) {
            return false;
        } else {
            $(this).closest('.form-group').remove();
        }
    }
    if($(this).hasClass('btnPlus')) {
        $(this)
        .closest('.form-group')
        .after('<div class="form-group ' + formGroupClass + '" data-clas="' + formGroupClass + '"></div>')
        .next()
        .append('<label for="" class="col-sm-2 control-label"></label>')
        .append('<div class="col-sm-4"></div>')
        .append('<div class="col-sm-2"></div>')
        .children('div.col-sm-4')
        .append('<select class="form-control" name="' + formGroupClass + '[]"></select>')
        .children('select')
        .append('<option></option>')
        .closest('.form-group')
        .children('div.col-sm-2')
        .append('<div class="btn-group" role="group" aria-label=""></div>')
        .children('.btn-group')
        .append('<a href="" class="btn btn-default btnMinus"><span class="glyphicon glyphicon-minus"></span></a>')
        .append('<a href="" class="btn btn-default btnNew"><span class="glyphicon glyphicon-pencil"></span></a>')
        .append('<a href="" class="btn btn-default btnPlus"><span class="glyphicon glyphicon-plus"></span></a>');
    }
    if($(this).hasClass('btnNew')) {
        $(this)
        .closest('.form-group')
        .after('<div class="form-group ' + formGroupClass + '" data-clas="' + formGroupClass + '"></div>')
        .next()
        .append('<label for="" class="col-sm-2 control-label"></label>')
        .append('<div class="col-sm-4"></div>')
        .append('<div class="col-sm-2"></div>')
        .children('div.col-sm-4')
        .append('<input type="text" name="' + formGroupClass + '[]" class="form-control" placeholder="Adicionar novo equipamento">')
        .closest('.form-group')
        .children('div.col-sm-2')
        .append('<div class="btn-group" role="group" aria-label=""></div>')
        .children('.btn-group')
        .append('<a href="" class="btn btn-default btnMinus"><span class="glyphicon glyphicon-minus"></span></a>')
        .append('<a href="" class="btn btn-default btnNew"><span class="glyphicon glyphicon-pencil"></span></a>')
        .append('<a href="" class="btn btn-default btnPlus"><span class="glyphicon glyphicon-plus"></span></a>');

    }
});

您可以在 jsfiddle 中看到它的工作原理

提前致谢

Answer 1

这是一个简单的拼写错误，您正在搜索 data-class 并在新元素上设置 data-clas 属性，更改它即可正常工作。

代码:

.after('<div class="form-group ' + formGroupClass + '" data-class="' + formGroupClass + '"></div>')

演示:https://jsfiddle.net/cse87189/