Question

我正在尝试创建一个动态表，用户可以在其中使用jquery添加或删除行。

在我的表中，有一个字段用于输入日期选择器，另一个输入用于maskmoney。

我正在使用 https://cdnjs.com/libraries/bootstrap-material-datetimepicker 对于datetimepicker

和https://plugins.jquery.com/maskMoney/赚钱。

我的datetimepicker函数是：

$('.datepicker').bootstrapMaterialDatePicker({
    format: 'DD-MM-YYYY',
    clearButton: true,
    weekStart: 1,
    time: false
});

对于默认行：

    <table class="table table-bordered" id="stuff-table">
    <thead>
        <th>#</th>
        <th>Name</th>
        <th>Date</th>
        <th>Price</th>
        <th>QTY (pcs)</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>
                <input type="text" class="form-control" placeholder="..." name="name-1" id="name-1" />
            </td>
            <td>
                <input type="text" class="datepicker form-control" placeholder="..." name="date-1" id="date-1">
            </td>
            <td>
                <input type="text" class="form-control" placeholder="..." name="price-1" id="price-1" />
            </td>
            <td>
                <input type="text" class="form-control" placeholder="..." name="qty-1" id="qty-1" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <a href="javascript:void(0);" id="add_row" type="button" class="btn bg-green btn-xs waves-effect">
                    <i class="material-icons">add</i>
                </a>
            </td>
            <td colspan="6">
                <button class="btn bg-blue btn-xs btn-block wave-effects">
                    <i class="material-icons">save</i> SAVE
                </button>
            </td>
        </tr>
    </tbody>
</table>


    <script type="text/javascript">
        $(document).ready(function(){
            $('#price-'+i).maskMoney({thousands:'.', decimal:',', precision:0});
            $('#qty-'+i).maskMoney({thousands:'.', decimal:',', precision:0});
        });
    </script>

在首次加载时一切正常，但是，当使用jquery生成的其他行时，datepicker和maskmoney无法正常工作。

这是我添加新行的功能：

 <script type="text/javascript">
        var row             = parseInt($('#stuff-table tr').length)-2;
        var increment       = row+1;
        var tr_open         = '<tr>';
        var td_increment    = '<td>'+increment+'</td>';
        var td_name         = '<td><input type="text" class="form-control" placeholder="..." name="name-'+increment+'" id="name-'+increment+'" /></td>';
        var td_date      = '<td><input type="text" class="datepicker form-control" placeholder="..." id="date-'+increment+'" name="date-'+increment+'"></td>';
        var td_price        = '<td><input type="text" class="form-control" placeholder="..." id="price-'+increment+'" name="price-'+increment+'"></td>';
        var td_qty          = '<td><input type="text" class="form-control" placeholder="..." id="qty-'+increment+'" name="qty-'+increment+'"></td>';
        var tr_close        = '</tr>';

        $('#stuff-table tr:last').before(data);

        var data            = tr_open+td_increment+td_name+td_date+td_price+td_qty+tr_close;


        $('#price-'+increment).maskMoney({thousands:'.', decimal:',', precision:0});
    </script>

有人知道为什么吗？有什么解决办法吗？

谢谢。

================================================ =========================

我用简单的方法解决了这个问题。只需在表中添加数据后添加函数即可调用moneymask和datetimepicker。

这是代码：

<script type="text/javascript">
            var row             = parseInt($('#stuff-table tr').length)-2;
            var increment       = row+1;
            var tr_open         = '<tr>';
            var td_increment    = '<td>'+increment+'</td>';
            var td_name         = '<td><input type="text" class="form-control" placeholder="..." name="name-'+increment+'" id="name-'+increment+'" /></td>';
            var td_date      = '<td><input type="text" class="datepicker form-control" placeholder="..." id="date-'+increment+'" name="date-'+increment+'"></td>';
            var td_price        = '<td><input type="text" class="form-control" placeholder="..." id="price-'+increment+'" name="price-'+increment+'"></td>';
            var td_qty          = '<td><input type="text" class="form-control" placeholder="..." id="qty-'+increment+'" name="qty-'+increment+'"></td>';
            var tr_close        = '</tr>';

            var data            = tr_open+td_increment+td_name+td_date+td_price+td_qty+tr_close;

            $('#stuff-table tr:last').before(data);


            $('#price-'+increment).maskMoney({thousands:'.', decimal:',', precision:0});

            $('.datepicker').bootstrapMaterialDatePicker({
                format: 'DD-MM-YYYY',
                clearButton: true,
                weekStart: 1,
                time: false
            });
        </script>

datepicker和maskmoney在动态表（添加）上不起作用

0 个答案: