快捷導(dǎo)航

前端LayUI監(jiān)聽(tīng)事件實(shí)例代碼匯總

更新時(shí)間：2024年08月13日 09:58:01 作者：下頁(yè)、再停留

在layui中,我們可以通過(guò)layui提供的監(jiān)聽(tīng)方法來(lái)對(duì)按鈕事件進(jìn)行,監(jiān)聽(tīng),下面這篇文章主要給大家介紹了關(guān)于前端LayUI監(jiān)聽(tīng)事件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、監(jiān)聽(tīng)單選按鈕事件

點(diǎn)擊資源類型單選按鈕時(shí)，請(qǐng)求后臺(tái)接口，把接口返回的內(nèi)容追加到選擇資源下拉框內(nèi)

HTML

<div class="layui-form-item">
	<label class="layui-form-label">資源類型：</label>
	<div class="layui-input-inline" style="width: 50%">
		<input type="radio" name="kind" lay-filter="kindradio" value="1" title="課件">
		<input type="radio" name="kind" lay-filter="kindradio" value="2" title="視頻">
	</div>
</div>

<div class="layui-form-item">
	<label class="layui-form-label">選擇資源：</label>
	<div class="layui-input-inline" style="width: 50%">
		<select name="public_kejian_id" lay-search="" lay-filter="source"  lay-verify="required" id="kejian_opt">
									
		</select>
	</div>
</div>

JQ

// 監(jiān)聽(tīng)
form.on('radio(kindradio)',function (data) {
	// 清空下拉框內(nèi)容
	$('#kejian_opt').empty();
	var section_id = $('[name="section_id"]').val()
	console.log(data)	
	$.ajax({
		url:'getKejianVideo',
		type:'POST',
		dataType:'JSON',
		data:{kind:data.value,section_id:section_id},
		success:function (res) {
			console.log(res)
			if (res.code == '200') {
				if (data.value == '1') {
					var tag = '課件';
				}else if (data.value == '2') {
					var tag = '視頻';
				}
				var html = "<option value=''>--直接選擇或搜索選擇--</option>";  
                $(res.data).each(function (v, k) {  
                    html += "<option value='" + k.id + "'>【"+tag+"】"+k.filename+"</option>";  
                });  
                //把遍歷的數(shù)據(jù)放到select里面  
                $("#kejian_opt").append(html);
			}else{
				layer.msg(res.message)
			}  
			//重新刷新了一下下拉框  
            form.render('select'); 
		}
	})
})

二、監(jiān)聽(tīng)下拉框事件

HTML

<select name="public_kejian_id" lay-search="" lay-filter="source"  lay-verify="required" id="kejian_opt">
									
</select>

JQ 獲取當(dāng)前選中的value值和對(duì)應(yīng)的文本

// 監(jiān)聽(tīng)下拉框
form.on('select(source)',function (data) {
	console.log('選中的id：'+data.value)
	var selectedText = data.elem[data.elem.selectedIndex].text;
	console.log('選中的文字：' + selectedText);
})

附：layui表單提交了多次的兩個(gè)原因

1. js文件引用了多次

使用layui需要引用layui.js，有的會(huì)引用layui.all.js。

如果使用layui默認(rèn)的表單提交方式，且你的上述js文件同時(shí)引用，或者重復(fù)引用，那么就會(huì)導(dǎo)致表單渲染多次，就會(huì)導(dǎo)致表單提交多次的情況。

// layui監(jiān)聽(tīng)提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最終的提交信息'
    })
    return false;
  });

引用的時(shí)候，注意不要同時(shí)引用layui.js和layui.all.js。如果自己的頁(yè)面需要引入其他的頁(yè)面，那么也要注意你需要引入的頁(yè)面中是否已經(jīng)引用過(guò)layui.js了，避免重復(fù)引用。

2. 觸發(fā)提交操作的事件出現(xiàn)在<form></form>內(nèi)

如果你是通過(guò)自己實(shí)現(xiàn)觸發(fā)事件來(lái)提交的，那么你觸發(fā)事件的提交按鈕不能再form標(biāo)簽內(nèi)。

例如有如下代碼

<form class="form-horizontal layui-form" role="form"  lay-filter="example">
	<label for="username" class="col-sm-4 control-label">姓名：
        <input type="text" name="username" id="username" value="" class="form-control">
    </label>
	<button class="layui-btn btn-info" id="submit">提交</button>
</form>
<script>
	$("#submit").click(function () {
        var username = $("#username").val();
        $.ajax(.....);   // 省略ajax提交
    });
</script>

觸發(fā)提交事件的按鈕是在<form>標(biāo)簽內(nèi)部的，所以當(dāng)點(diǎn)擊提交之后，也會(huì)觸發(fā)兩次提交。

將提交按鈕放到<form>標(biāo)簽外就可以防止多次提交了。