1

我有一个动态创建的记录列表，如下所示：

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

4

1 回答 1

1

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

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

事件数据

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

现在您只需要确保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>

于 2016-12-18T21:26:23.033 回答