semantic-ui 忽略模态对话框中的 e.preventDefault

Question

我正在尝试使用语义-ui 来阻止从带有模态对话框的页面转移，但是，e.preventDefault() 似乎不起作用：

<!DOCTYPE html>
<html>
<head>
    <title>Modal Block HREF</title>

    <link rel="stylesheet" type="text/css" href="node_modules/semantic-ui/dist/semantic.min.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/semantic-ui/dist/semantic.min.js"></script>
</head>
<body>

<a class="dirty" href="http://www.microsoft.com">Microsoft</a>
<a class="dirty" href="http://www.google.com">Google</a>

<div id="confirmmodal" class="ui small modal">
    <div class="header">FIRST</div>
    <div class="content">
        <div class="left">
            The first of many interesting things
        </div>
    </div>
    <div class="actions">
        <div class="ui black deny button">
            Cancel
        </div>
        <div class="ui positive button">
            OK
        </div>
    </div>
</div>

<div id="savemodal" class="ui small modal">
    <div class="header">SECOND</div>
    <div class="content">
        <div class="left">
            The second of many interesting things
        </div>
    </div>
    <div class="actions">
        <div class="ui black deny button">
            Cancel
        </div>
        <div class="ui positive button">
            OK
        </div>
    </div>
</div>

<script type="text/javascript">
$('.dirty').on('click', function(e, t) {
    // This works...
    //if (confirm('Are you sure')) {
    //    console.log("allow transfer");
    //}
    //else {
    //    console.log("block transfer");
    //    e.preventDefault();
    //}

    // This does NOT work
    $('#confirmmodal')
        .modal({
            onApprove: function () {
                console.log("allow transfer");
            },
            onDeny: function () {
                console.log("prevent transfer");
                   e.preventDefault();
                }
            })
        .modal('show');
});
</script>
</body>
</html>

似乎发生的是 link 在对话框甚至出现之前立即得到响应，即使我点击取消 quickly，也没有什么区别。

Answer 1

您需要防止首次点击提交页面。使用下面

<script type="text/javascript">
    $('.dirty').on('click', function(e, t) {
        e.preventDefault(); 
        var href = $(this).attr("href");
        $('#confirmmodal') .modal({
            onApprove: function () {
                console.log("allow transfer"); 
                window.location = href;
            }, 
            onDeny: function () {
                console.log("prevent transfer");
            } 
        }) .modal('show'); 
    });
 </script>

semantic-ui 忽略模态对话框中的 e.preventDefault

semantic-ui ignores e.preventDefault in modal dialog

javascript

semantic-ui