最近用到了 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. JDK、Eclipse、Tomcat、Maven、IDEA 常见问题

    windows操作分成了32位和64位的系统,不同的系统安装的软件也不一样. 查询电脑操作系统是多少位? J D K 01. 下载安装 02. 目录解释 03. 配置环境变量 (JDK安装成功后进行配 ...

  2. StopWatch 监控Java代码运行时间和分析性能

    背景 有时我们在做开发的时候需要记录每个任务执行时间,或者记录一段代码执行时间,最简单的方法就是打印当前时间与执行完时间的差值,然后这样如果执行大量测试的话就很麻烦,并且不直观,如果想对执行的时间做进 ...

  3. windows远程连接linux-安装xfce界面，ubuntn添加新用户

    参考:“ 使用xrdp实现windows 远程桌面连接linux”   http://blog.csdn.net/qq_33530388/article/details/64502902; http: ...

  4. Django项目：CRM(客户关系管理系统)--19--11PerfectCRM实现King_admin分页显示条数

    登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html list_per_page = 2 #分页条数 list_per_page = 2 #分页条数 ...

  5. Delphi 设计模式：《HeadFirst设计模式》Delphi7代码---门面模式之HomeTheater[转]

      1unit uSubObject;   2   3interface   4   5type   6   7  { TAmplifier与TTuner,TCDPlayer,TDVDPlayer相互 ...

  6. 读书笔记--Head First JavaScript 目录

    1.交互式网络 2.存储数据 3.探索客户端 4.决策 5.循环 6.函数 7.表单与验证 8.驾驭网页 9.为数据带来生命 10.创建自定义对象 11.除错务尽 12.动态数据

  7. java 5 绘图GUI

    ---恢复内容开始--- 绘图的基本原理 color 在awt包里面 字体的相关类 Graphics类常用方法 JFrame 继承JFrame就有主窗口了 Java2D API 绘图的例子 了解Swi ...

  8. Python实例 分割路径和文件名

    import  os.path # 常用函数有三种:分隔路径,找出文件名.找出盘符(windows系统),找出文件的扩展名. # 根据你机器的实际情况修改下面参数. spath = " D: ...

  9. SPOJ GSS5

    GSS5 - Can you answer these queries V #tree You are given a sequence A[1], A[2], ..., A[N] . ( |A[i] ...

  10. 存储过程详解 -SQLServer

    来源:http://www.cnblogs.com/knowledgesea/archive/2013/01/02/2841588.html 存储过程简介 什么是存储过程:存储过程可以说是一个记录集吧 ...