聊聊 Layui监听单选框,下拉框,复选框等代码写法

最近在做Coral项目的时候遇到这样一个问题:Layui中怎么动态监听radio单选框的事件,下面先来看一段代码:

<html>
...
    <form>
        <input type="radio" name="type" value="1" title="菜单" checked>
        <input type="radio" name="type" value="2" title="按钮">
    </form>
....
</html>

<script>
    $('input[type=radio][name=type]').change(function() {
        alert($("input[name='type']:checked").val());
    });
</script>

以上<script>代码块是我们引用 jQuery常规写法,按道理是当你切换<html>部分的单选框时应该会alert出选中的值,但经项目调试后事实证明上面的JS部分代码是无效的!那么问题来了,为什么会不好使呢?这不是标准的 jQuery语法吗?

经过上网一番查询得到答案,固记录一下作为备忘。

因为使用了layui以后,单选框(以及复选框、下拉框等等)要用form提供的监听语法来实现。原因是经过layui的form组件处理之后,你看到的“单选框”、“复选框”、“下拉选择”,这些被美化的东东,实际上不是原始的节点,原始的节点都到幕后去了,所以绑定在原始节点上事件是没用的。

【Layui官方建议】:既然使用组件,那就充分利用它,既然它都给你提供了这些表单元素对应的事件了,那就用它的事件监听方式就可以了。

Layui语法写法如下:

<html>
...
    <form>
        <input name="type" type="radio" lay-filter="rightType" value="1" title="菜单" checked/>
        <input name="type" type="radio" lay-filter="rightType" value="2" title="按钮"/>
    </form>
....
</html>

<script>
    layui.use(['form'], function(){

        var form = layui.form();
    
        //这里'radio(rightType)' 一定要注意 rightType是filter 请在上方input增加lay-filter属性
        form.on('radio(rightType)', function(data){
          console.log(data.elem); //得到radio原始DOM对象
          console.log(data.value); //被点击的radio的value值
        });  
    });
</script>

注:这里'radio(rightType)' 一定要注意 rightType是filter 请在上方input增加lay-filter属性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值