最近用到了 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. webService cxf学习

    1.首先去官网下载cxf包 http://archive.apache.org/dist/cxf/ 记住要选.zip结尾 大概40兆的样子 2.把上边的包都放项目里.如果你用的jeecg框架,那它自带 ...

  2. Hadoop IO 特性详解（1）【数据完整性】

    本文结合hadoop : the definitive guide精心而作,包含作者的心血,希望可以帮助大家理解一点hdfs的皮毛,足矣.(charles@xingbod.cn) hadoop本身自带 ...

  3. Leetcode102. Binary Tree Level Order Traversal二叉树的层次遍历

    给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如: 给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 返回其 ...

  4. 关于JavaScript的43道题①

    最近在github上大火的43到js代码题,有很多人搬运.原链接https://github.com/lydiahallie/javascript-questions 1.下面代码的输出是什么? fu ...

  5. Codeforces 467D

    题目链接 D. Fedor and Essay time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  6. 英特尔人工智能圆桌论坛举行 四位大咖论道AI

    英特尔人工智能圆桌论坛举行 四位大咖论道AI 2017-04-01 17:57     北京2017年4月1日电 /美通社/ -- 毫无疑问,人工智能已是最具变革力的发展趋势之一,在3月31日举行的2 ...

  7. Java问题解读系列之String相关---String类的常用方法？

    今天的题目是:String类的常用方法? 首先,我们在eclipse中定义一个字符串,然后使用alt+/就会出现String类的所有方法,如下图所示: 下面我就挑选一些常用的方法进行介绍: 首先定义两 ...

  8. neo4j遍历和图算法

    阅读更多 这篇blog主要和大家分享一下neo4j中是如何对节点进行遍历,和其中集成的图论的一些常用算法. 遍历 http://docs.neo4j.org.cn/tutorials-java-emb ...

  9. Django 的学习(1) 从建立到数据库操作

    基本是翻译官方教程 django-admin startproject mysite 创建工程的命令 来看一下django的结构图 manage.py 和工程交互的多种方式 inner mysilte ...

  10. 定时任务 $ ls /etc/cron* + cat$ for user in $(cat /etc/passwd | cut -f1 -d:); do crontab -l -u $user; done

    是否有某个定时任务运行过于频繁? 是否有些用户提交了隐藏的定时任务? 在出现故障的时候,是否正好有某个备份任务在执行?