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如果我最后按模式窗口中的OK按钮，并在我的数据库中删除它？谢谢！

Answer 1

只需在您的删除锚标记上收听click个事件。获取所点击链接的data-id属性值，并使用模态上的confirmation事件将当前ID添加为绑定到事件的自定义数据。

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

event.data

描述：绑定当前执行处理程序时传递给事件方法的可选数据对象。

现在您只需要确保已删除模态上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窗口

1 个答案: