快捷導航

Layui給switch添加響應(yīng)事件的例子

更新時間：2019年09月03日 16:09:42 作者：阿圣_Code

今天小編就為大家分享一篇Layui給switch添加響應(yīng)事件的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

今天做項目時，遇到layui中的switch，需要給這個開關(guān)添加事件，也就是當你點擊是會彈框提示

剛開始我用傳統(tǒng)的處理方法，直接給它添加個js事件，到最后會發(fā)現(xiàn)，沒響應(yīng)，于是我查文檔，逛論壇終于找到一個解決辦法，代碼如下

 <input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="開啟|關(guān)閉" checked="checked">//開關(guān)
 //js處理
 layui.use(['form', 'jquery', 'layer'], function () {
      var form = layui.form;
      var jquery = layui.jquery;
      var layer = layui.layer;
      //監(jiān)聽開關(guān)事件
      form.on('switch(switchTest)', function (data) {
        var contexts;
        var x = data.elem.checked;//判斷開關(guān)狀態(tài)
        if (x==true) {
          contexts = "你確定要啟動么";
        } else {
          contexts = "你確定要關(guān)閉么";
        }
        layer.open({
          content: contexts
          , btn: ['確定', '取消']
          , yes: function (index, layero) {
            data.elem.checked = x;
            form.render();
            layer.close(index);
            //按鈕【按鈕一】的回調(diào)
          }
          , btn2: function (index, layero) {
            //按鈕【按鈕二】的回調(diào)
            data.elem.checked = !x;
            form.render();
            layer.close(index);
            //return false 開啟該代碼可禁止點擊該按鈕關(guān)閉
          }
          , cancel: function () {
            //右上角關(guān)閉回調(diào)
            data.elem.checked = !x;
            form.render();
            //return false 開啟該代碼可禁止點擊該按鈕關(guān)閉
          }
        });
        return false;
      });
    });

哈哈，總之，既然用人家layui框架，就要準守人家的規(guī)矩！任何事件都要監(jiān)聽的，單純的寫js事件是沒反應(yīng)的，監(jiān)聽事件要寫在 layui.use（{}）中。

以上這篇Layui給switch添加響應(yīng)事件的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: