javascript - Semantic-ui 在模式对话框中忽略 e.preventDefault-6ren

javascript - Semantic-ui 在模式对话框中忽略 e.preventDefault

转载作者：行者123 更新时间：2023-12-03 06:46:09

25

4

我正在尝试使用语义 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>

似乎发生的情况是在对话框出现之前立即响应链接，即使我快速单击“取消”，也没有什么区别。

最佳答案

您需要阻止第一次点击提交页面。使用下面的内容

<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>

关于javascript - Semantic-ui 在模式对话框中忽略 e.preventDefault，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37726643/

25

4

0

文章推荐： AngularJS - Promise 与 then？

文章推荐： vue.js - Vue路由器中的确切路径匹配？

文章推荐：列出 Powershell 中的所有设备、分区和卷

文章推荐： javascript - vue-router未捕获ReferenceError:未定义路由器

java - ArrayDqueue类的add(E e)和offer(E e)的区别
您好，我在最后一步使用了 add 和 offer 来添加我的元素。两者都返回 boolean 值，并且除了 NPE 之外都不会抛出任何异常。 public class ArrayDequeDemo
javascript - 使用url编码转换特殊字符(é è ë)
我正在做一个功能，用户的电子邮件客户端只打开一个预填充的内容 (javascript)。问题是我在转换特殊字符时遇到问题，因此它们无法正确显示到电子邮件客户端(内容由 url 传递)。我写了一个函
java - Collection&Queue&BlockingQueue接口(interface)中的add(E e)方法
问题一: 在阅读 JDK 源代码时，我发现该方法 boolean add(E e);在接口(interface)中定义 Collection & Queue & BlockingQueue . 我无法
sql-server-2005 - 如何在 SQL Server 中执行不区分重音的比较(e 与 è、é、ê 和 ë)？
我想比较 SQL 中的两个 varchar，一个类似于 Cafe ，另一个 Café SQL 中是否有一种方法可以允许这两个值进行比较。例如: SELECT * FROM Venue WHERE Na
php 正则表达式匹配类似于字母。又名 u=ü 或 ê=é=è=e
我正在研究一种方法来搜索文本中的特定单词并突出显示它们。该代码工作完美，除了我希望它也匹配相似的字母。我的意思是，搜索 fête 应该匹配 fêté、fete、... 有没有一种简单而优雅的方法来做到
Angular2 异常 : No provider for e! (e -> e)
所以我有一个非常简单的组件，它加载了一个简单的路由器。我正在使用所有基本的东西，比如 ngFor、ngSwitch、ngIf，我通过 COMMON_DIRECTIVES 注入(inject)它们我收
javascript - 如何在 javascript 中转换 é -> e, š -> s, ė -> e , ą -> a ... ？
我有一个类似 Brazil: Série A 的字符串，我的目标是转换为 Brazil: Serie A。此外，方法应该转换和其他类似的情况:é -> e, š -> s, ė -> e , ą -
java - AbstractList - add(int index, E element)、add(E e) 等返回类型的区别？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
angular - StaticInjectorError[e -> e] : NullInjectorError: No provider for e
在我的 app.module.ts @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule
java - SELECT e From Employee e - 为什么是多余的 "e"？
Sample查询: SELECT e FROM Employee e WHERE SUBSTRING(e.name, 3) = 'Mac' 在这种语法中，说 SELECT e 似乎很直观，即 e 现在
objective-c - 将 ë、à、é、ä 等特殊字符全部转换为 e、a、e、a？ objective-c
objective-c 中是否有一种简单的方法可以将所有特殊字符(如 ë、à、é、ä)转换为普通字符(如 e en a)？最佳答案是的，而且非常简单: NSString *src = @"Conv
ruby - 在 Ruby 中，如何将 ë,à,é,ä 等特殊字符全部转换为 e,a,e,a？
我想将 ë 之类的字符转换为普通的 e。我正在寻找关于语言和人们如何输入城市的转换。例如，大多数人在搜索时实际上输入的是 Brasilia，而不是 Brasília。当 Rueters 等新闻机构报道
javascript - function(e){e.something...} 什么是 e？
当我写作时 $("#new_lang").click(function(e) { alert("something"); e.stopPropagation(); }); 这里的 e 是什么，
Java List 到 Map> 的键是 E 的某些属性，值是具有该属性的 E
我想知道如何将 Java List 转换为 Map。映射中的键是列表元素的某些属性(不同的元素可能具有相同的属性)，值是这些列表项的列表(具有相同的属性)。例如。 List --> Map> 。我找到
java - 为什么我们在 Deque 中有 offer(E e) 和 offerLast(E e) 方法，即使它们解决的是相同的目的
我试图理解，为什么我们需要 Deque 中的 Offer 和 OfferLast 方法，因为这两种方法都在Deque 的结尾/尾部。它有什么意义？最佳答案 Queue 接口(interface)是在
c# - 使用表达式生成 e => new { e.Id, e.CompanyId }
这个问题是这个问题的延续 here .如果有人想知道为什么我需要做这样的事情，你可以在那个问题中找到理由。这并不重要，真的。我需要这样的方法: public virtual Expression>
java - 什么时候需要 Some> 而不是 Some？
注意:这个问题与 Enum 无关，所以它不是重复的。Enum 被迫只与自身比较，因为编译器生成类型参数，而不是因为 java 递归类型参数。我试图找到将类声明为的优势: public class S
java - 什么时候需要 Some> 而不是 Some？
注意:这个问题与 Enum 无关，所以它不是重复的。Enum 被迫只与自身比较，因为编译器生成类型参数，而不是因为 java 递归类型参数。我试图找到将类声明为的优势: public class S
c - 结构示例 *e : differences between function(&e) and function(e)
如果我有一个struct example *e，function(&e) 和function(e) 之间有什么区别？一个例子。这是第一个代码: #include struct example {
c# - LINQ: "select new {e.FName, e.LName}"和 "select (e.FName, e.LName)"之间的区别？
这个问题在这里已经有了答案: C# 7.0 ValueTuples vs Anonymous Types (2 个答案) 关闭去年。这两个查询有什么区别？ var query = from e i

首页

博学

6Ren·AI

商城

javascript - Semantic-ui 在模式对话框中忽略 e.preventDefault