如何将我要删除的记录的 ID 传递给 Remodal window

Question

我有一个这样创建的动态记录列表：

Option 1 <a href="#modal" data-id="1">delete</a>
Option 2 <a href="#modal" data-id="2">delete</a>
Option 3 <a href="#modal" data-id="3">delete</a>
Option 4 <a href="#modal" data-id="4">delete</a>

和 Remodal window（更多信息来源https://github.com/VodkaBears/Remodal#remodal）：

<div class="remodal-bg">
<div class="remodal" data-remodal-id="modal">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>Deleting record</h1>
    <p>
        Are sou sure?
    </p>
    <br>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

如果我按下删除，一切正常，模式 Window 打开但是...我怎么知道我点击了 ID 3 或...ID 2...的记录...所以我可以将它发送到我的 jQuery ajax 并在我的数据库中删除它，如果我最终在模式 window 中按下 OK 按钮？谢谢！

Answer 1

只需监听有关删除锚标记的 click 事件。获取点击的 link 的 data-id 属性值，并使用模态框上的 confirmation 事件将当前 ID 添加为绑定到事件的自定义数据。

这里有一些关于它如何工作的信息。

event.data

Description: An optional object of data passed to an event method when the current executing handler is bound.

现在您只需确保移除为模态框上的 confirmation 事件添加的侦听器，因为模态框可能通过取消而非确认关闭。您可以使用模式上的 closed 事件来执行此操作。

这是一个例子。

var $delBtns = $('a[data-id]');
var idToDel = 0;

function deleteRecord ( e ) {
  console.log("Delete record with ID:", e.data.relatedId);
}

$delBtns.on('click', function() {
  idToDel = this.dataset.id;
  $(document).one('confirmation', '.remodal', { relatedId: idToDel }, deleteRecord);
})

$(document).on('closed', '.remodal', function (e) {
  $(document).off('confirmation', '.remodal', deleteRecord);
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal-default-theme.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal.min.js"></script>

Option 1 <a href="#modal" data-id="1">delete</a><br>
Option 2 <a href="#modal" data-id="2">delete</a><br>
Option 3 <a href="#modal" data-id="3">delete</a><br>
Option 4 <a href="#modal" data-id="4">delete</a>

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Deleting record</h1>
  <p>
    Are sou sure?
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

如何将我要删除的记录的 ID 传递给 Remodal window

How to pass an ID of a record I want to delete to Remodal window

javascript

jquery

modal-dialog

remodal