最近用到了 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. 稀疏表示step by step(转)

    原文地址:稀疏表示step by step(转)作者:野火春风 稀疏表示step by step(1)     声明:本人属于绝对的新手,刚刚接触“稀疏表示”这个领域.之所以写下以下的若干个连载,是鼓 ...

  2. C#绘制渐变线条

    Brush brush = , ), , ), Color.Blue, Color.White); e.Graphics.FillRectangle(brush, this.ClientRectang ...

  3. WPF 禁用中文

    <TextBox InputMethod.IsInputMethodEnabled="False" />

  4. IDEA Maven打包时去掉test

  5. Docker（一）简介及核心概念

    1.简介 Docker是一个开源的应用容器引擎:是一个轻量级容器技术: Docker支持将软件编译成一个镜像:然后在镜像中各种软件做好配置,将镜像发布出去,其他使用者可以直接使用这个镜像: 运行中的这 ...

  6. https://vjudge.net/problem/2198221/origin

    https://vjudge.net/problem/2198221/origin逆向思维,原题是人出来,我们处理成人进去,算出来每个人的曼哈顿距离,然后从大到小排序,距离长的先入.走的距离+这个人从 ...

  7. 使用springMvc对象属性自动封装从jsp向controller传值

    controller通过ModelAndView向前台传传递信息 jsp也可以通过model向controller传递信息 这只是其中的一个办法,还有其他几种方式进行前后端的数据交互 如何才能让spr ...

  8. linux系统级别的计划任务及其扩展anacrontab

    这个是系统设置好了,清理系统垃圾或者是自动执行某些脚本的系统任务,一般我们做了解就行了,不要更改配置文件是/etc/conrtab SHELL:就是运行计划任务的解释器,默认是bash PATH:执行 ...

  9. mysql错误日志目录

    在windows下,一般是mysql安装目录下的data目录下 ,扩展名是.err的文件.

  10. 机器学习中的那些树——决策树（三、CART 树）

    前言 距上篇文章已经过了9个月 orz..趁着期末复习,把博客补一补.. 在前面的文章中介绍了决策树的 ID3,C4.5 算法.我们知道了 ID3 算法是基于各节点的信息增益的大小 \(\operat ...