可重复使用的引导程序模式以确认删除

Question

我有一个视图，用户可以通过单击按钮来动态添加行，现在，当用户尝试删除其中一个行时，我试图显示一种确认模式；但是，它总是在第一个删除位置删除该行。

要澄清：

如果我删除位置1的行，并尝试删除位置3的行，它将删除现在位置1的行。

有没有一种方法可以重用我的模式，而无需为每一行创建一个模式？

$('#add-widget').on('click', function(e){
    e.preventDefault();

    var n = ($('#widgets tr').length - 0) + 1;
    var tr =
         '<tr id="'+n+'">' +
             '<td><input type="text" class="form-control" id="position" name="position[]" placeholder="Position" value="'+n+'"></td>' +
             '<td><input type="text" class="form-control" id="descriptionW" name="descriptionW[]" placeholder="Description"></td>'+
             '<td>' +
             '<select id="type" name="type[]" class="form-control" required>' +
                '<option value="header">Header</option>' +
                '<option value="row">Row</option>' +
             '</select></td>'+
             '<td style="vertical-align:middle"><a data-delete-link="'+n+'" class="btn btn-danger btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm"><i class="fa fa-trash-o"></i> Remover </a></td>'+
         '</tr>';
    $('#widgets').append(tr);
});

$(document).on('click', '.btn-danger', function(){
    $('#delete-form').attr('data-id', $(this).data('delete-link'));
});

$('#delete-form').on('submit', function(e){
    e.preventDefault();

    var id = $(this).data('id');
    $('#'+id+'').remove();
    $('table > tbody > tr').each(function() {
        if(this.id > id) {
            this.id = parseInt(this.id) - 1;
            $(this).find(":text").eq(0).attr('value', this.id);
            $(this).children(':last').find("a").attr('data-delete-link', this.id);
        }
    });

    $('.bs-example-modal-sm').modal('hide');
});

<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Widgets
  <button type="button" id="add-widget">
    <i class="fa fa-plus"></i> Add
  </button>
</h4>

<table id="datatable-widgets" cellspacing="0" width="100%">
  <thead>
    <tr>
        <th class="reorder">Position</th>
        <th class="no-sort">Description</th>
        <th class="no-sort">Type</th>
        <th class="no-sort">Actions</th>
    </tr>
  </thead>
  <tbody id="widgets"> </tbody>
</table>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <form id="delete-form">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">Confirm Delete</h4>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this record?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Confirm</button>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>

Answer 1

尝试使用data('id', ...)和data('delete-link', ...)代替attr('data-id', ...)和attr('data-delete-link', ...)

$('#add-widget').on('click', function(e){
    e.preventDefault();

    var n = ($('#widgets tr').length - 0) + 1;
    var tr =
         '<tr id="'+n+'">' +
             '<td><input type="text" class="form-control" id="position" name="position[]" placeholder="Position" value="'+n+'"></td>' +
             '<td><input type="text" class="form-control" id="descriptionW" name="descriptionW[]" placeholder="Description"></td>'+
             '<td>' +
             '<select id="type" name="type[]" class="form-control" required>' +
                '<option value="header">Header</option>' +
                '<option value="row">Row</option>' +
             '</select></td>'+
             '<td style="vertical-align:middle"><a data-delete-link="'+n+'" class="btn btn-danger btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm"><i class="fa fa-trash-o"></i> Remover </a></td>'+
         '</tr>';
    $('#widgets').append(tr);
});

$(document).on('click', '.btn-danger', function(){
    $('#delete-form').data('id', $(this).data('delete-link'));
});

$('#delete-form').on('submit', function(e){
    e.preventDefault();

    var id = $(this).data('id');
    $('#'+id+'').remove();
    $('table > tbody > tr').each(function() {
        if(this.id > id) {
            this.id = parseInt(this.id) - 1;
            $(this).find(":text").eq(0).attr('value', this.id);
            $(this).children(':last').find("a").data('delete-link', this.id);
        }
    });

    $('.bs-example-modal-sm').modal('hide');
});

<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Widgets
  <button type="button" id="add-widget">
    <i class="fa fa-plus"></i> Add
  </button>
</h4>

<table id="datatable-widgets" cellspacing="0" width="100%">
  <thead>
    <tr>
        <th class="reorder">Position</th>
        <th class="no-sort">Description</th>
        <th class="no-sort">Type</th>
        <th class="no-sort">Actions</th>
    </tr>
  </thead>
  <tbody id="widgets"> </tbody>
</table>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <form id="delete-form">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">Confirm Delete</h4>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this record?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Confirm</button>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>