javascript - 如何将我想要删除的记录的 ID 传递到 Remodel 窗口

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 窗口(更多信息来源位于 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>

如果我按下删除按钮，一切正常，模式窗口将打开，但是...我怎么知道我单击了ID为3或...ID 2的记录...以便我可以将其发送到我的jQuery ajax如果最后我在模式窗口中按“确定”按钮，然后将其删除在我的数据库中？谢谢!

Answer 1

只需监听删除 anchor 标记上的click 事件即可。获取单击链接的 data-id 属性值，并使用模态上的 confirmation 事件将当前 ID 添加为绑定(bind)到该事件的自定义数据。

以下是有关其工作原理的一些信息。

event.data

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

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

这是一个示例。

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>