Recently, the x-editable plug-in is used, and a headache is found. X-editable cannot initialize the same < a > element twice.
For example, when the page is loaded, use array 1 to fill a drop-down box; then click the button, and use array 2 to fill the drop-down box again; click the drop-down box at this time, and the data of array 1 is found.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="plugins/bootstrap-3.3.7-dist/css/bootstrap.css" /> 6 <link rel="stylesheet" href="plugins/bootstrap3-editable/css/bootstrap-editable.css" /> 7 <title>Editable table test</title> 8 <script src="plugins/jquery-3.4.1.js"></script> 9 <script src="plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script> 10 <script src="plugins/bootstrap3-editable/js/bootstrap-editable.js"></script> 11 </head> 12 <body> 13 <h1>X-editable</h1> 14 <div id="div1"> 15 <a href="#" id="target"></a> 16 </div> 17 <button onclick="fun()">click</button> 18 </body> 19 <script> 20 // Initialize the drop-down box for the first time after the page is loaded 21 $(function() { 22 var items = [{value: "giant", text: "Giant"}, {value: "merida", text: "Merida"}]; 23 $("#target").editable({ 24 type: 'select', 25 mode: 'popup', 26 source: items, 27 sourceCache: false, 28 emptytext: 'Null value', 29 placement: 'bottom', 30 success: function(response, newValue) { 31 console.log(newValue); 32 } 33 }); 34 }); 35 // Click the button for the second initialization 36 function fun() { 37 // $("#div1").html(""); 38 // $("#div1").html('<a href="#" id="target"></a>'); 39 // $(function() { 40 var items2 = [{value: "geely", text: "Auspicious"}, {value: "gwm", text: "The Great Wall"}]; 41 $("#target").editable({ 42 type: 'select', 43 mode: 'inline', 44 source: items2, 45 sourceCache: false, 46 emptytext: 'Please choose', 47 success: function(response, newValue) { 48 console.log(newValue); 49 } 50 }); 51 // }); 52 } 53 </script> 54 </html>
My solution is to let go of the comments above. In other words, first remove the < a > target from the DOM, and then add a new < a > element in the original location with jQuery. After the element is created, perform the second initialization.
If the page uses Vue, the same is true. First, the page data bound by Vue is stored in a temporary variable, and then the data bound by Vue is emptied. After the page rendering is completed, the data in the temporary variable is backfilled into Vue or other further operations are carried out. The code is similar to the following:
1 var app = new Vue({ 2 el: '#app', 3 data: { 4 list: [] 5 }, 6 methods: { 7 renderHtml: function(data) { 8 var temp = app.list; // Data stored in temporary variable temporarily 9 app.list = []; // Clear binding data 10 $(function() { 11 // After the page rendering, backfill the data or carry out other further operations 12 app.list = data; 13 // Further operations 14 }); 15 } 16 } 17 });
For this problem, I studied the source code of X-EDIT table. Unfortunately, the level is limited, and I didn't see where the problem was. So I temporarily adopted this rather stupid method.