Méthodes d'écoute des événements Layui-Tutoriel Layui-php.cn

Méthodes d'écoute des événements Layui

尚

Libérer： 2019-11-30 12:03:15

avant

4388 Les gens l'ont consulté

Méthodes d'écoute des événements Layui

Lors de l'utilisation du formulaire de layui pour la vérification et la soumission, s'il est combiné avec une vue ou une liaison à trois niveaux, une surveillance des événements est requise.

Syntaxe spécifique :

form.on('event(filter value)', callback);

peut être utilisé pour surveiller : select, checkbox, switch , radio, soumettre les modifications

1. Surveillance des modifications sélectionnées

<!-- 不用form 用div也可以 -->
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">下拉选择框</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <option value="0">写作</option>
                <option value="1">阅读</option>
                <option value="2">听歌</option>
                <option value="4">游戏</option>
            </select>
        </div>
    </div>
</form>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript">
layui.use(&#39;form&#39;, function(){
    var form = layui.form;
    form.on(&#39;select(aihao)&#39;,function(data){
        console.log(data);
        console.log(data.elem); //得到select原始DOM对象
        console.log(data.value); //得到被选中的值
        console.log(data.othis); //得到美化后的DOM对象
    });
});
</script>

Copier après la connexion

De même, surveillance de la case à cocher

form.on(&#39;checkbox(filter)&#39;, function(data){
    console.log(data.elem); //得到checkbox原始DOM对象
    console.log(data.elem.checked); //是否被选中，true或者false
    console.log(data.value); //复选框value值，也可以通过data.elem.value得到
    console.log(data.othis); //得到美化后的DOM对象
});

Copier après la connexion

Commutateur de surveillance :

form.on(&#39;switch(filter)&#39;, function(data){
　　console.log(data.elem); //得到checkbox原始DOM对象
　　console.log(data.elem.checked); //开关是否开启，true或者false
　　console.log(data.value); //开关value值，也可以通过data.elem.value得到
　　console.log(data.othis); //得到美化后的DOM对象
});

Copier après la connexion

Surveiller la sélection unique de la radio :

form.on(&#39;radio(filter)&#39;, function(data){
    console.log(data.elem); //得到radio原始DOM对象
    console.log(data.value); //被点击的radio的value值
});

Copier après la connexion

Soumission du moniteur :

<button lay-submit lay-filter="*">提交</button>
form.on(&#39;submit(*)&#39;, function(data){
    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

Copier après la connexion

Pour plus de connaissances sur Layui, veuillez faire attention à la colonne Tutoriel d'utilisation de Layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!