快捷導(dǎo)航

layui的form.on的使用示例詳解

更新時(shí)間：2023年07月08日 10:35:18 作者：Dont give up

這篇文章主要介紹了layui的form.on的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

layui的form.on的使用

一.容器所在的form代碼里要有form的class=“layui-form”

<form class="layui-form" action="" id="f1">
	<button id="query" type="button" class="layui-btn" lay-submit lay-filter="queryBtn">查詢</button>
</form>

二、該組建的屬性里要有l(wèi)ay-sumbit 和lay-filter如上圖片中的button

三、form.on的使用要在 layui.use([‘table’,‘form’,‘layer’], function(){}中

例：

 layui.use(['table','form','layer'], function(){
	form.on('submit(queryBtn)', function (data) {
            //執(zhí)行重載
            table.reload('t1', {
                url: '',
                type: 'post',
                page: {
                    curr: 1, //重新從第 1 頁(yè)開(kāi)始
                }
                , where: {
                    "applyTime1":$("#applyTime1").val(),
                    "applyTime2":$("#applyTime2").val(),
                    "status":$("#status").val()
                }
            })
        });
}

四、form.on（‘submit(這里面是組鍵的lay-filter)’）

layui框架form.on(‘select(XXX)‘,function(){})；方法不執(zhí)行解決方法

在layui框架中使用form.on方法綁定select下拉框選中事件，form.on()方法不執(zhí)行, 解決方法有以下幾點(diǎn)：

1. html中form標(biāo)簽中要有class="layui-form"，否則不生效

<form class="layui-form">
</form>

2. form.on方法必須放在layui.use({})里

<script language="JavaScript">
    layui.use(['form', 'layer'], function () {
        form.on('select(XXX)', function (data) {});
    });

3. select標(biāo)簽中要有lay-filter屬性，用來(lái)監(jiān)聽(tīng)select

<select id="XXX" lay-filter="XXX" lay-verify="required" lay-search>
        <option></option>
</select>

以上解決方法就能使form.on方法執(zhí)行了

到此這篇關(guān)于layui的form.on的使用的文章就介紹到這了,更多相關(guān)layui的form.on的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)動(dòng)態(tài)改變r(jià)adio狀態(tài)的方法
下面小編就為大家分享一篇js實(shí)現(xiàn)動(dòng)態(tài)改變r(jià)adio狀態(tài)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
js實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交
這篇文章主要介紹了js如何實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交，幫助大家更好的理解和使用js，感興趣的朋友可以了解下
2020-12-12
ionic環(huán)境配置及問(wèn)題詳解
這篇文章主要為大家詳細(xì)介紹了ionic環(huán)境配置及問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
javascript中定義私有方法說(shuō)明(private method)
本篇文章主要是對(duì)javascript中定義私有方法(private method)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
H5+css3+js搭建帶驗(yàn)證碼的登錄頁(yè)面
這篇文章主要為大家詳細(xì)介紹了H5+css3+js搭建帶驗(yàn)證碼的登錄頁(yè)面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
Bootstrap面板學(xué)習(xí)使用
這篇文章主要為大家詳細(xì)介紹了Bootstrap面板的學(xué)習(xí)使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
JavaScript反轉(zhuǎn)數(shù)組常用的4種方法
這篇文章主要給大家介紹了關(guān)于JavaScript反轉(zhuǎn)數(shù)組常用的4種方法,反轉(zhuǎn)數(shù)組可以將數(shù)組中的元素順序顛倒過(guò)來(lái),從而達(dá)到一些特定的需求,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
js返回頂部實(shí)例分享
本文主要分享了js返回頂部的實(shí)例代碼?？蓮?fù)制直接運(yùn)行，方便快捷。有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
javascript實(shí)現(xiàn)文件拖拽事件
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)文件拖拽事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-03-03
簡(jiǎn)述凍結(jié)JS對(duì)象方法技術(shù)
本文主要介紹了凍結(jié)JS對(duì)象方法技術(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07