gpt4 book ai didi

Jquery UI 警报对话框与表单元素一起使用时消失

转载 作者:行者123 更新时间:2023-12-01 07:38:35 24 4
gpt4 key购买 nike

Jquery UI 对话框与表单元素一起使用时,它会立即消失。当我删除整个表单标签内容时,我看到只有当用户单击关闭按钮时才会关闭它。问题是在对话框内创建 div 时,表单元素使其消失吗? 尝试使用 css 自定义样式和 Jquery .attr().html() 通过覆盖 native 警报来实现相同的目的。

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="httpsz:/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>

function displayalert()
{
$("<div>This is sample</div>").dialog();
}
</script>
</head>
<body>

<form>
<p>Select Items</p><br>
<input type="radio" name="checking">Item 1<br>
<input type="radio" name="checking">Item 2<br>
<input type="radio" name="checking">Item 3<br>
<input type="radio" name="checking">Item 4<br>
<input type="submit" onclick="displayalert()">
</form>
</body>
</html>

我已经添加了在单击按钮时显示的警报。如单独使用时所述,仅当用户单击关闭时我才看到它关闭。但当与 form 一起使用时,它会立即消失。

仅当用户单击关闭按钮时,我才需要关闭警报。由于表单内容太大,因此未包含表单内容。它有成组的单选按钮和复选框以及提交按钮。

最佳答案

问题是当您单击按钮时,表单会被提交。因为您正在使用包含在 sie <form> 中的按钮提交类型的输入。元素。

HTML认为您想要将表单数据发送到服务器进行处理,以便刷新。通过告知不提交表格,那么您的jquery工作并返回消息。只需添加 onsubmit="return false;"对于表单标签。

`onsubmit="return false;"` 的作用是什么?

This basically done to handle the form submission via JavaScript.Just do nothing and return the control flow

通过 www.codexpedia.com 查找更多相关信息

这也会有帮助 prevent refresh of page when button inside form clicked

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="httpsz:/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>

function displayalert()
{
$("<div>This is sample</div>").dialog();
}
</script>
</head>
<body>

<form onsubmit="return false;">
<p>Select Items</p><br>
<input type="radio" name="checking">Item 1<br>
<input type="radio" name="checking">Item 2<br>
<input type="radio" name="checking">Item 3<br>
<input type="radio" name="checking">Item 4<br>
<input type="submit" onclick="displayalert()">
</form>
</body>
</html>

关于Jquery UI 警报对话框与表单元素一起使用时消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57541359/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com