layui點(diǎn)擊按鈕頁(yè)面會(huì)自動(dòng)刷新的解決方案

發(fā)布時(shí)間：2020-09-14 08:38:52 來(lái)源：腳本之家閱讀：693 作者：扎哈的信徒欄目：web開(kāi)發(fā)

問(wèn)題：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" rel="external nofollow" >
</head>
<body>
<form class="layui-form">
 <div class="layui-form-item">
 <label class="layui-form-label">輸入框</label>
 <div class="layui-input-inline">
  <input type="text" name="" placeholder="請(qǐng)輸入" autocomplete="off" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <div class="layui-input-block">
  <button class="layui-btn test" >test</button>
 </div>
 </div>
</form>
 
<script src="../../layuiadmin/layui/layui.js"></script>
<script>
 layui.use(['laytpl','jquery','layer','form'],function () {
 var laytpl = layui.laytpl,
  layer = layui.layer,
  form = layui.form,
  $ = layui.$;
 
 $('.test').click(function () {
  layer.msg("test");
 });
 });
</script>
</body>
</html>

點(diǎn)擊test按鈕后，應(yīng)該彈出信息“test”，但是運(yùn)行后沒(méi)有彈出信息，而是頁(yè)面刷新了。

原因：

button,input type=button按鈕在IE和w3c，firefox瀏覽器區(qū)別：

當(dāng)在IE瀏覽器下面時(shí)，button標(biāo)簽按鈕，input標(biāo)簽type屬性為button的按鈕是一樣的功能，不會(huì)對(duì)表單進(jìn)行任何操作。

但是在W3C瀏覽器，如Firefox下就需要注意了，button標(biāo)簽按鈕會(huì)提交表單，而input標(biāo)簽type屬性為button不會(huì)對(duì)表單進(jìn)行任何操作。

解決辦法：

方法一：將button標(biāo)簽更換為input

<input class="layui-btn test" >test</input>

方法二：

<button type="button" class="layui-btn test" >test</button>

以上這篇layui點(diǎn)擊按鈕頁(yè)面會(huì)自動(dòng)刷新的解決方案就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

layui點(diǎn)擊按鈕頁(yè)面會(huì)自動(dòng)刷新的解決方案

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽