最近用到了 X-editable 可编辑表格插件，发现了一个头疼的问题，X-editable 不能对同一个 <a> 元素二次初始化。

如下代码举例：在页面加载完成时，用“数组1”填充一个下拉框；然后单击按钮，用“数组2”再次填充该下拉框；此时点开下拉框，发现竟然还是“数组1”的数据。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <link rel="stylesheet" href="plugins/bootstrap-3.3.7-dist/css/bootstrap.css" />

     <link rel="stylesheet" href="plugins/bootstrap3-editable/css/bootstrap-editable.css" />

     <title>可编辑表格试验</title>

     <script src="plugins/jquery-3.4.1.js"></script>

     <script src="plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

     <script src="plugins/bootstrap3-editable/js/bootstrap-editable.js"></script>

 </head>

 <body>

     <h1>X-editable</h1>

     <div id="div1">

         <a href="#" id="target"></a>

     </div>

     <button onclick="fun()">click</button>

 </body>

 <script>

 // 页面加载完后第一次初始化下拉框

 $(function() {

     var items = [{value: "giant", text: "捷安特"}, {value: "merida", text: "美利达"}];

     $("#target").editable({

         type: 'select',

         mode: 'popup',

         source: items,

         sourceCache: false,

         emptytext: '空值',

         placement: 'bottom',

         success: function(response, newValue) {

             console.log(newValue);

         }

     });

 });

 // 单击按钮进行第二次初始化

 function fun() {

     // $("#div1").html("");

     // $("#div1").html('<a href="#" id="target"></a>');

     // $(function() {

         var items2 = [{value: "geely", text: "吉利"}, {value: "gwm", text: "长城"}];

         $("#target").editable({

             type: 'select',

             mode: 'inline',

             source: items2,

             sourceCache: false,

             emptytext: '请选择',

             success: function(response, newValue) {

                 console.log(newValue);

             }

         });

     // });

 }

 </script>

 </html>

我的解决方案是把上面注释部分放开。也就是先将 <a> 目标从 DOM 中删除，然后用 jQuery 在原位置添加一个新的 <a> 元素，待元素创建好之后，再进行第二次初始化就可以了。

如果页面使用 Vue，那么道理也是一样。先将 Vue 绑定的页面数据存在一个临时变量中，然后清空 Vue 绑定的数据，待页面渲染完成之后，再将临时变量中的数据回填进 Vue 或进行其它进一步的操作。代码类似下面这样：

 var app = new Vue({

     el: '#app',

     data: {

         list: []

     },

     methods: {

         renderHtml: function(data) {

             var temp = app.list;    // 数据暂存入临时变量

             app.list = [];            // 清空绑定数据

             $(function() {

                 // 页面渲染完后再回填数据或进行其它进一步的操作

                 app.list = data;

                 // 进一步的操作……

             });

         }

     }

 });

对于这个问题，研究了一下 X-editable 源码，可惜水平有限，没看出来问题出在哪，于是暂时采用这种比较笨的办法。

X-editable 不能二次初始化的问题解决方案的更多相关文章

  1. DirectX11笔记(二)--Direct3D初始化1之基本概念

    原文:DirectX11笔记(二)--Direct3D初始化1之基本概念 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737/art ...

  2. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

  3. 轻量ORM-SqlRepoEx （二）初始化SqlRepoEx

    一.SqlRepoEx引用 暂时没放至nuget上,可以直接到https://github.com/AzThinker/SqlRepoEx下载源码,编译引用. (一).静态引用 1.需引用以下dll在 ...

  4. Objective-C学习笔记（二十二）——初始化方法init的重写与自己定义

    初学OC.对init这种方法不是非常了解.我们如今来分别对init方法进行重写以及自己定义,来加深对他的了解. 本样例也是用Person类来进行測试. (一)重写init方法. (1)在Person. ...

  5. C++2.0新特性(二)——<一致性初始化、Initializer_list 、for循环、explicit>

    一.一致性初始化(uniform initialization) 之前初始化时存在多个版本,让使用者使用时比较混乱,现在提供一种万用的初始化方法,就是使用大括号. 原理解析:当编译器看到大括号包起来的 ...

  6. Tomcat源码阅读（二）初始化

    近来,我开始阅读tomcat的源码,感觉还挺清晰易懂:为了方便理解,我参考了网上的一些文章,把tomcat的组成归纳一下:整个tomcat的组成如下图所示: Tomcat在接收到用户请求时,将会通过以 ...

  7. Win32中GDI+应用（二）--初始化与清理

    GDI+提供了GdiplusStartup和 GdiplusShutdown 函数来进行初始化和完成清理工作.你必须在调用其他的GDI+函数之前,调用GdiplusStartup函数,在完成GDI+工 ...

  8. 二、初始化superset

    上一步成功安装了superset, 1.初始化数据 创建命令 #创建管理员账号fabmanager create-admin --app superset#cd到superset 根目录参考路径 C: ...

  9. vue 源码学习二 实例初始化和挂载过程

    vue 入口 从vue的构建过程可以知道,web环境下,入口文件在 src/platforms/web/entry-runtime-with-compiler.js(以Runtime + Compil ...

随机推荐

  1. Python学习之高阶函数--嵌套函数、函数装饰器、含参函数装饰器

    玩了一晚上王者,突然觉得该学习,然后大晚上的搞出来这道练习题,凌晨一点写博客(之所以这么晚就赶忙写是因为怕第二天看自己程序都忘了咋写的了),我太难了o(╥﹏╥)o 言归正传,练习题要求:构造类似京东的 ...

  2. 2019.10.29 csp-s模拟测试93 反思总结

    T1: 求出前缀和,三维偏序O(nlog2n)CDQ 二维其实就可以 #include<iostream> #include<cstdio> #include<cstri ...

  3. IDEA中配置国内maven库镜像（阿里云）

    配置maven中settings.xml,在mirrors段内增加镜像配置,配置后如下: <mirror> <id>nexus-aliyun</id> <mi ...

  4. stringstream的使用 UVA 10815

    水题题目描述就不写了 主要是发现stringstream真的是好用,可以把string绑定到stringstream中,然后就能以空格为分隔符分割出每个单词,听说每次重新创建stringstream开 ...

  5. jquery判断元素是否出现在可视区

      在我们的日常开发中,经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况.我最近在优化环球网首页的时候,将非可视区的代码全部放入到webComponent中.打算当这个元素出现在可视区的时候 ...

  6. loj6046 「雅礼集训 2017 Day8」爷

    https://loj.ac/problem/6046 最近遇到几个分块题,我发现我一遇到分块题就死活构造不出来 不对,明明是,遇到数据结构题,就死活构造不出来. 所以我就找了几个分块题做做. 其实分 ...

  7. 解决WSL上运行plantUML中文乱码问题

    生成UML图命令: java -jar plantuml.jar -charset UTF-8 my.txt 1. 保证my.txt 使用uft-8编码 2. wsl中安装中文字体: 如: sudo ...

  8. loadrunner录制脚本时登录密码转md5

    在录制用户注册登录脚本时,常常会遇到web程序对用户密码进行加密处理.在很多时候采用的加密方式为MD5. 这时有两种处理方式: 一.所有用户采用同一密码 例如:每个用户名的密码都为e10adc3949 ...

  9. JS---案例：拖曳对话框

    案例:拖曳对话框 ps: 实际没有要拖曳登录框的需求,只是演示拖曳的这个效果 1. 获取超链接,注册点击事件,显示登陆框和遮挡层 2. 获取关闭,注册点击事件,隐藏登陆框和遮挡层 3. 按下鼠标,移动 ...

  10. pl/sql 语句块循环语句

    ---基本循环declarev1 number(2) :=1;begin loop dbms_output.put_line(v1); v1:=v1+1; exit when v1>10; -- ...