ColResizable on dynamic table not working

Question

I have a dynamic table in which the user can add rows or columns, I also use colResizable to make it flexible so that the user can resize the columns. Although I added this plugin, it does not work for newly created cells.
This is my source

$(document).ready(function() {
   $( "#container table" ).colResizable({ liveDrag : true });
   //... Other stuffs
}

This function to create a column

function insert_column(element, position)
{
   element.parent().parent().find('tr').each(function() {
      var index = 0;
      $(this).find('td').each(function() {
         if (index == position)
         {
             $(this).after('<td>&nbsp;</td>');
         }
         index++;
      });
   });
   $( "#container table" ).colResizable({ liveDrag : true });
}

If you want, you can think about it because of some CSS, this is the only CSS that I have for #containerand the tables inside

#container {
    float: left;
    width:800px;
    height:100%;
    overflow:hidden;
    padding: 7px;
    border: 2px #BBB dashed;
}
#container table {
    width: 100%;
    table-layout: fixed;
    background-color:#FCFCFC;
}
#container td {
    border-spacing: 2px;
    min-height: 17px;
    min-width: 50px;
    border: 1px #CCC dotted;
}

The strange part is that if I comment or delete colResizable, it works to add columns, but if I turn it on, it adds columns, but it doesn’t appear and cannot be changed. Any help would be appreciated.

Answer 1

: https://github.com/alvaro-prieto/colResizable/issues/2#issuecomment-5198584

//Disable the plugin first    
$( "#container table" ).colResizable({ disable : true });

insert_column();

//Re-init the plugin on the new elements
$( "#container table" ).colResizable({ liveDrag : true });

Answer 2

. , , Resizer .

colResizable(), HTML colResizable().

.

"tblqresult" . :

• colResizable() .
• Tbody .
• .
• .
• setResultTableColresizable() , colResibale() .

> function updateResultTableColumns(){
>         $('#tblqresult').colResizable({ disable : true });
> 
>         $('table#tblqresult tbody').empty();
>         $('#tblqresult').find('th').remove();
> 
>         //Adding columns as per select list in that order
>         $('#' + selectULiD + ' li').each(function(){
>             if( $(this).text() != 'Drop Columns here...'){
>               var th1 = $("<th></th>").text($(this).text());
>               $('table#tblqresult tr:first').append(th1);
>             }
>         });
>         setResultTableColresizable(); }
> 
> 
> function setResultTableColresizable(){  
> $("#tblqresult").colResizable({
>     fixed:false,
>     liveDrag:true,
>     gripInnerHtml:"<div class='grip2'></div>", 
>     draggingClass:"dragging"    }); }

Answer 3

I use fullCalendar.js to create a planning table. And in this table I need to make resizable columns. For this I use colResizable.js. This allows me to resize the title bar. But the same does not apply to columns whose data was set by calling jQuery ajax from the server. I struggled with this for a long time. Can someone please help me with the same.