最近用到了 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. 《DSP using MATLAB》Problem 7.33

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  2. HDFS常用Java API

  3. TZOJ 4267 An Easy Puz(深搜)

    描述 Wddpdh find an interesting mini-game in the BBS of WHU, called “An easy PUZ”. It’s a 6 * 6 chess ...

  4. nfs服务安装配置

    一.准备阶段 配置解析主机 检查版本及内核 二.服务端安装 1) 配置yum把下载好的软件留着,下次备用,不用再下载 cachedir=/var/cache/yum/$basearch/$releas ...

  5. stream求集合元素的属性值最值

    Person p1 = new Person("张三", new BigDecimal("10.0"));Person p2 = new Person(&quo ...

  6. HDU6200 mustedge mustedge mustedge

      不用看题就知道这是和什么tarjan.缩点或桥一类有关的题. 谁让他取题目叫一个mustedge还连续写3次的(哦,似乎是因为那个比赛的题目都是这个画风) 必须的边 >必须要经过的边 > ...

  7. html文档加载顺序简单理解

    html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. JS random函数深入理解（转载）

    转载自:(本文对读者有帮助的话请移步支持原作者) http://www.cnblogs.com/starof/p/4988516.html 一.预备知识 Math.ceil();  //向上取整. M ...

  9. LR自带网站飞机订票系统 启动

    LR自带的网站:飞机订票系统 可是如何启动自带的网站呢?? 一.启动服务:开始-所有程序--HP Software-HP LoadRunner-Samples-Web-Start Web Server ...

  10. Linux监听的网络服务$ netstat -ntlp$ netstat -nulp$ netstat -nxlp

    我一般都分开运行这三个命令,不想一下子看到列出一大堆所有的服务.netstat -nalp倒也可以.不过我绝不会用 numeric 选项 (鄙人一点浅薄的看法:IP 地址看起来更方便). 找到所有正在 ...