jquery library not working when copying/ adding a new row-CodePudding

I’m creating a table, and this table should have a row with a multiple-select tags field in a cell. In order to implement the multiple-select tags field, I’m using a jQuery library —indicated below—. This table should also have the possibility to allow for new entries by clicking on “add new”. However, when I click on the add new row button, the library that allows for the multiple-select tags functionality to work stops working.

I’m not quite sure if I’m missing something here, but the ultimate goal for this table is to add/duplicate several rows, each one with the multiple-select tags field.

Here’s my code (and thank you):

  <div >
   <div >
    <table  id="crud_table">
     <tr>
      <th width="30%">Names</th>
      <th width="30%">LastName</th>
      <th width="30%">Id</th>
      <th width="45%">States</th>
      <th width="10%">Options</th>
     </tr>
     <tr>
      <td ></td>
      <td contenteditable="true" ></td>
      <td contenteditable="true" ></td>
      <td contenteditable="true" >
      <select  name="states[]" multiple="multiple">
        <option value="AL">Alabama</option>
        <option value="NY">New York</option>
        <option value="ME">Medellin</option>
        <option value="CM">Ciudad de Mexico</option>
        <option value="WY">Wyoming</option>
      </select>
      </td>
      <td></td>
     </tr>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" >Añadir</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" >Guardar</button>
    </div>
    <br />
    <div id="inserted_item_data"></div>
   </div>
   
  </div>

My JS:

$(document).ready(function(){
 var count = 1;
 $('#add').click(function(){
  count = count   1;
  var html_code = "<tr id='row" count "'>";
  html_code  = '<td contenteditable="false" ><select  name="states[]"  multiple="multiple"><option value="AL">Alabama</option><option value="NY">New York</option></td>';
   //html_code  = "<td contenteditable='true' class='name'></td>";
   html_code  = "<td contenteditable='true' class='lastName'></td>";
   html_code  = "<td contenteditable='true' class='id'></td>";
   html_code  = '<td contenteditable="true" ></td>';
   html_code  = "<td><button type='button' name='remove' data-row='row" count "' class='btn btn-danger btn-xs remove'>Eliminar</button></td>";   
   html_code  = "</tr>";  
   $('#crud_table').append(html_code);
 });
 
 $(document).on('click', '.remove', function(){
  var delete_row = $(this).data("row");
  $('#'   delete_row).remove();
 });
 
 $('#save').click(function(){
  var name = [];
  var lastName = [];
  var id= [];
  var state= [];
  $('.name').each(function(){
   name.push($(this).text());
  });
  $('.lastName').each(function(){
   lastName.push($(this).text());
  });
  $('.id').each(function(){
   nuip.push($(this).text());
  });
  $('.state').each(function(){
   examenes.push($(this).text());
  });
 });
 
});

And this is how i am implementing the library:

  $(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});

CodePudding user response：

I change your html and JS codes a little :) Also convert the save function result into list of data model json. I hope that will help you to generating own codes

BTW: in the next question, merge your sample html and js into one code snippet window

var r = (t)=>$(t).closest("tr").remove();

$(document).ready(function(){

  $('#add').click(function(){
 
  let html_code = "<tr>\
  <td contenteditable='true' class='name'></td>\
  <td contenteditable='true' class='lastName'></td>\
  <td contenteditable='true' class='id'></td>\
  <td contenteditable='true' class='states'>\
  <select class='js-example-basic-multiple' multiple='multiple'>\
  <option value='AL'>Alabama</option>\
  <option value='NY'>New York</option>\
  </select>\
  </td>\
  <td><button type='button' class='btn btn-danger btn-xs' onclick='r(this)'>Eliminar</button></td>\
  </tr>";  
   $('#crud_table tbody').append(html_code);
 });
 
  
 $('#save').click(function(){
  var data = [];
  $("#crud_table tbody").find("tr")
  .each((i,row)=>{
    let rowData = {};
    $(row).find("td").each((ii,cell)=>$(rowData).attr($(cell).attr("class"),$(cell).attr("class") =="states" ? $(cell).find("option:selected").text() : $(cell).text()));
    data.push(rowData);
  });
  
  console.log(data);
 });
 
});

<!--importing external libraries-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--importing external libraries-->

<div >
   <div >
    <table  id="crud_table">
    <thead>
     <tr>
      <th width="30%">Names</th>
      <th width="30%">LastName</th>
      <th width="30%">Id</th>
      <th width="45%">States</th>
      <th width="10%">Options</th>
     </tr>
     </thead>
     <tbody>
     <tr>
      <td ></td>
      <td contenteditable="true" ></td>
      <td contenteditable="true" ></td>
      <td contenteditable="true" >
      <select  name="states[]" multiple="multiple">
        <option value="AL">Alabama</option>
        <option value="NY">New York</option>
        <option value="ME">Medellin</option>
        <option value="CM">Ciudad de Mexico</option>
        <option value="WY">Wyoming</option>
      </select>
      </td>
      <td></td>
     </tr>
     </tbody>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" >Añadir</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" >Guardar</button>
    </div>
    <br />
    <div id="inserted_item_data"></div>
   </div>
   
  </div>