layui form.on select 无效问题或者重复渲染,form.on 点击事件无效。

问题描述,没有基本逻辑错误,但是点击无效,后来出现了一个新的问题,select选项渲染两次,原始的武无效,下面的可以触发,初步判断样式出了问题,根据正常的样式比较。layui 的form.on应该是生成新的覆盖原来或者隐藏原来的选项的触发点击事件。

JS代码如下:

 layui.use(['form'], function () {
        var form = layui.form;
        //二次渲染 ,点击有效form.on 这里有效
         layui.form.render();  

        alert(1112)
        form.on('select(yd_ydld)', function (data) {

            alert(2222)

        });

        form.on('select(yj_sgdd)', function (data) {
            alert(3333)
            let value = Number(data.value);
            let name = data.elem.name;//获取名字(输出data的路径)
            let htmlValue = data.elem[value].innerHTML;
            console.log(name)
            console.log(data)
        });

    });

JS中render()后会有两个选项,不render()form.on事件无效。可能其他的样式把.layui-form select 的   display: none;替换,因此需要改回去。

错误如下:

 错误两个都可以选择,且互相渲染,但是form.on事件第一个上面无效。

解决关键CSS .layui-form select 的   display: none;

/* 隐藏原始的选择项,防止与form.om 冲突无效 */

.layui-form select {

    display: none;

}

.layui-select-title{

    position: relative;

    top:0px;

    height: 34px;

}

form HTML 如下

<form class="layui-form layui-colla-content  layui-show" id="ydyj_form">

                                    <!-- 拥堵地点路段 -->
                                    <div class="layui-form layui-form-item" >
                                        <label class="layui-form-label ">拥堵路段</label>
                                        <div class="layui-form layui-input-block"  id="ydld">
                                            <select class="selcetoptions" lay-filter="yd_ydld" name="ydld">
                                                <option value="">选择路段</option>
                                                <option value="1">去地图获取路段起始点</option>
                                                <option value="2">输入拥堵路段</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!-- 拥堵等级 -->
                                    <div class="layui-form layui-form-item">
                                        <label class="layui-form-label ">拥堵等级</label>
                                        <div class="layui-form layui-input-block" id="yddj">
                                            <select class="selcetoptions" lay-filter="yj_yddj" name="yddj">
                                                <option value="">选择等级</option>
                                                <option value="1">轻度拥堵</option>
                                                <option value="2">中度拥堵</option>
                                                <option value="3">严重拥堵</option>
                                                <option value="4">阻塞不通</option>

                                            </select>
                                        </div>
                                    </div>
                                    <!-- 拥堵诱因 -->
                                    <div class="layui-form layui-form-item" id="ydyj_ydyy">
                                        <label class="layui-form-label ">拥堵诱因</label>
                                        <div class="layui-form layui-input-block" id="ydyy">
                                            <select class="selcet-options" lay-filter="yj_ydyy" name="ydyy">
                                                <option value="">选择原因</option>
                                                <option value="1">高峰原因</option>
                                                <option value="2">违停原因</option>
                                                <option value="3">交通管制</option>
                                                <option value="4">事故原因</option>
                                                <option value="5">道路施工或破损</option>
                                                <option value="6">其他</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!-- 补充说明 -->
                                    <div class="layui-form layui-form-item bcsm">
                                        <label class="layui-form-label bcsmLable">补充说明</label>

                                        <textarea placeholder="补充说明有关车辆,涉及部门" placeholder="" name="" class="Txet_bcsm"
                                            cols="70" rows="12"></textarea>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block to-bottom">
                                            <button class="layui-btn layui-btn-primary text-white"
                                                id="yj_yjyj_reset_btn" type="reset">重置表单
                                            </button>
                                            <button class="layui-btn" id="ydyj_tsxx" type="button">推送信息
                                            </button>
                                        </div>
                                    </div>
                                </form>

注意render()的作用。理解如有错欢饮指出

猜你喜欢

转载自blog.csdn.net/qq_51165365/article/details/130151303