javascript - 单击时将 "on-the-fly"数据绑定(bind)到模态

Question

我有以下代码来获取数据并动态填充到表格中:

 $.ajax({
        method: "GET",
        url: "/portal/management/fees/" + source_id,
        success: function() {
            $.getJSON('/portal/management/fees/' + source_id, function(data) {
                var table='<table><thead> <tr> <th>Limit</th> <th>Amount</th> <th>Description</th> <th></th> </tr> </thead>';
                /* loop over each object in the array to create rows*/
                $.each( data, function( index, item){
                    /* add to html string started above*/
                    table+='<tr>' +
                               '<td>' +item.limit +'</td>' +
                               '<td>' +item.amount +'</td>' +
                               '<td>' +item.description + '</td>' +
                               '<td><button class="btn btn-xs btn-default btn-action edit-btn"'+
                                    'id="editBtn"'+
                                    'data-fee-id="'+ item.id+'"'+
                                    'data-fee-amount="'+item.amount+'"'+
                                    'data-fee-limit="'+item.limit+'"'+
                                    'data-fee-description="'+item.decription+'"'+
                                    'data-fee-type="'+item.type+'"'+
                                    'data-fee-vat="'+item.vat+'"'+
                                    'data-toggle="modal"'+
                                    'data-target="#feeModal">'+
                                    '<i class="fa fa-edit"></i>'+
                                    '</button>' +
                               '</td>' +
                           '</tr>';
                });

                $("#source-table").html( table );
            });
        },
        error: function() {
            console.log('Error occurred! ' + msg.responseText);
        }
    });

但是我有一个在模态中打开的按钮，我需要获取每条记录的每个传递到各个模态的数据。自定义属性似乎不起作用，我尝试过以下代码但无济于事。

$(".edit-btn").click(function() {

    var fee_id = $(this).attr('data-fee-id');
    var amount =  $(this).attr('data-fee-amount');
    var limit =  $(this).attr('data-fee-limit');
    var desc =  $(this).attr('data-fee-description');
    var type = $(this).attr('data-fee-type');
    var vat = $(this).attr('data-fee-vat');

    $('#feeId').val(fee_id);
    $('#amount').val(amount);
    $('#limit').val(limit);
    $('#desc').val(desc);
    $('#type').val(type);
    $('#vat').val(vat);
});

所以问题是如何获取模式中单击相应按钮的每条记录的数据？ 非常感谢任何帮助/建议。

Answer 1

一句话。尝试一下

success: function() {
            $.getJSON('/portal/management/fees/' + source_id, function(data) {
                var table='<table><thead> <tr> <th>Limit</th> <th>Amount</th> <th>Description</th> <th></th> </tr> </thead>';
                /* loop over each object in the array to create rows*/
                $.each( data, function( index, item){
                    /* add to html string started above*/
                    table+='<tr>' +
                               '<td>' +item.limit +'</td>' +
                               '<td>' +item.amount +'</td>' +
                               '<td>' +item.description + '</td>' +
                               '<td><button class="btn btn-xs btn-default btn-action edit-btn"'+
                                    'id="editBtn"'+
                                    'data-fee-id="'+ item.id+'"'+
                                    'data-fee-amount="'+item.amount+'"'+
                                    'data-fee-limit="'+item.limit+'"'+
                                    'data-fee-description="'+item.decription+'"'+
                                    'data-fee-type="'+item.type+'"'+
                                    'data-fee-vat="'+item.vat+'"'+
                                    'data-toggle="modal"'+
                                    'data-target="#feeModal">'+
                                    '<i class="fa fa-edit"></i>'+
                                    '</button>' +
                               '</td>' +
                           '</tr>';
                });

                $("#source-table").html( table );
                $(".edit-btn").click(function() {

                  var fee_id = $(this).attr('data-fee-id');
                  var amount =  $(this).attr('data-fee-amount');
                  var limit =  $(this).attr('data-fee-limit');
                  var desc =  $(this).attr('data-fee-description');
                  var type = $(this).attr('data-fee-type');
                  var vat = $(this).attr('data-fee-vat');

                 $('#feeId').val(fee_id);
                 $('#amount').val(amount);
                 $('#limit').val(limit);
                 $('#desc').val(desc);
                 $('#type').val(type);
                 $('#vat').val(vat);
                 });
            });
        },