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

更新時(shí)間：2019年10月25日 10:29:38 作者：扎哈的信徒

今天小編就為大家分享一篇layui點(diǎn)擊按鈕頁面會(huì)自動(dòng)刷新的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

問題：

<!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)行后沒有彈出信息，而是頁面刷新了。

原因：

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)擊按鈕頁面會(huì)自動(dòng)刷新的解決方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)仿銀行密碼輸入框效果的代碼
這篇文章通過實(shí)例代碼給大家介紹了javascript實(shí)現(xiàn)仿銀行密碼輸入框效果，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2007-12-12
關(guān)于js中for in的缺陷淺析
這篇文章主要介紹了js中for in的缺陷，有需要的朋友可以參考一下
2013-12-12
JavaScript開發(fā)簡單易懂的Svelte實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了JavaScript開發(fā)簡單易懂的Svelte實(shí)現(xiàn)原理的內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2021-11-11
JavaScript ES6中類與模塊化管理超詳細(xì)講解
JavaScript中的模塊化是指將每個(gè)js文件會(huì)被認(rèn)為單獨(dú)一個(gè)的模塊。模塊之間是互相不可見的。如果一個(gè)模塊需要使用另一個(gè)模塊，那么需要通過指定語法來引入要使用的模塊，而且只能使用引入模塊所暴露的內(nèi)容
2023-01-01
原生js封裝運(yùn)動(dòng)框架的示例講解
下面小編就為大家?guī)硪黄鷍s封裝運(yùn)動(dòng)框架的示例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
JavaScript中push(),join() 函數(shù) 實(shí)例詳解
本文通過實(shí)例給大家介紹了JavaScript中push(),join() 的知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2016-09-09
javascript級(jí)聯(lián)下拉列表實(shí)例代碼(自寫)
javascript下拉菜單想必大家在瀏覽網(wǎng)頁的時(shí)候都會(huì)看到吧，已不是那么陌生了，本文介紹使用javascript實(shí)現(xiàn)級(jí)聯(lián)下拉列表實(shí)例，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助
2013-05-05
js中判斷控件是否存在
在動(dòng)態(tài)頁面中，頁面中包含一些動(dòng)態(tài)產(chǎn)生的控件，在有些情況下需要判斷動(dòng)態(tài)生成的控件是否存在。
2010-08-08
JS和JQ的event對(duì)象區(qū)別分析
js和jq的event對(duì)象大同小異，本文簡單對(duì)比下它們的'click'事件下的不同和應(yīng)用，給有需要的小伙伴參考下
2014-11-11
js如何獲取兄弟、父類等節(jié)點(diǎn)
本文為大家介紹下js獲取兄弟、父類等節(jié)點(diǎn)的方法，感興趣的朋友可以參考下
2014-01-01