layui點擊按鈕頁面會自動刷新的解決方案
問題:
<!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="請輸入" 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>
點擊test按鈕后,應(yīng)該彈出信息“test”,但是運行后沒有彈出信息,而是頁面刷新了。
原因:
button,input type=button按鈕在IE和w3c,firefox瀏覽器區(qū)別:
當(dāng)在IE瀏覽器下面時,button標(biāo)簽按鈕,input標(biāo)簽type屬性為button的按鈕是一樣的功能,不會對表單進行任何操作。
但是在W3C瀏覽器,如Firefox下就需要注意了,button標(biāo)簽按鈕會提交表單,而input標(biāo)簽type屬性為button不會對表單進行任何操作。
解決辦法:
方法一:將button標(biāo)簽更換為input
<input class="layui-btn test" >test</input>
方法二:
<button type="button" class="layui-btn test" >test</button>
以上這篇layui點擊按鈕頁面會自動刷新的解決方案就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 帶有滾動條的表格,標(biāo)題固定,帶排序功能.
帶有滾動條的表格,標(biāo)題固定,帶排序功能. 雖然經(jīng)測試有點問題,但編程思路很清晰,需要的朋友可以參考下。2009-11-11JS教程:window.location使用方法的區(qū)別介紹
這篇文章介紹了window.location使用方法的區(qū)別,有需要的朋友可以參考一下2013-10-10javascript實現(xiàn)一個網(wǎng)頁加載進度loading
本篇文章主要介紹了javascript實現(xiàn)一個頁面加載進度loading的具體步驟以及示例代碼,具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01javascript實現(xiàn)發(fā)送短信驗證碼案例
這篇文章主要為大家詳細介紹了javascript實現(xiàn)發(fā)送短信驗證碼案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07JavaScript中的二進制數(shù)據(jù)處理方法詳解
Blob、ArrayBuffer和Buffer是JavaScript中用于表示和操作二進制數(shù)據(jù)的三種主要方式,本文將深入探討這些概念,以及它們?nèi)绾卧贘avaScript中使用,需要的可以參考一下2023-06-06