I enjoy the practicality of Bootstrap5 Toggle plugin. The purpose of plugin provide user the option to toggle from one Module A to Module B. Each line item is wrap under DIV class .lineitem-wrapper.
Other elements in .lineitem-wrapper includes span and input text which are link to events. Work like a charm.
However, the issue comes with the clone elements of lineitem-wrapper and the toggle plugin stop responding. The other elements like span and input text events are working absolutely fine.
HTML
<code> <div class="row lineitems-wrapper mb-1">
<div class="row lineitem-wrapper mb-1">
<!-- line item module by toggle -->
<div class="col-1 m-0">
<input type="checkbox" class="pm-0 check-moduleId" data-size="sm" checked data-toggle="toggle" data-onlabel="GL" data-offlabel="STK" data-onstyle="primary" data-offstyle="warning">
</div>
<div class="col-3 pm-0 ">
<div class="input-group">
<input type="text" class="form-control input-lineitem-code px-1 " placeholder="Select Stock / GL ">
<!-- the stkgl edit btn -->
<div class="input-group-prepend position-relative">
<span class="input-group-text text-primary mdi mdi-magnify border-bottom-0 px-1 btn-lineitem-edit-stkgl cursor-pointer"> </span>
</div>
</div>
</div>
</div>
codes here...
</code>
<code> <div class="row lineitems-wrapper mb-1">
<div class="row lineitem-wrapper mb-1">
<!-- line item module by toggle -->
<div class="col-1 m-0">
<input type="checkbox" class="pm-0 check-moduleId" data-size="sm" checked data-toggle="toggle" data-onlabel="GL" data-offlabel="STK" data-onstyle="primary" data-offstyle="warning">
</div>
<div class="col-3 pm-0 ">
<div class="input-group">
<input type="text" class="form-control input-lineitem-code px-1 " placeholder="Select Stock / GL ">
<!-- the stkgl edit btn -->
<div class="input-group-prepend position-relative">
<span class="input-group-text text-primary mdi mdi-magnify border-bottom-0 px-1 btn-lineitem-edit-stkgl cursor-pointer"> </span>
</div>
</div>
</div>
</div>
codes here...
</code>
<div class="row lineitems-wrapper mb-1">
<div class="row lineitem-wrapper mb-1">
<!-- line item module by toggle -->
<div class="col-1 m-0">
<input type="checkbox" class="pm-0 check-moduleId" data-size="sm" checked data-toggle="toggle" data-onlabel="GL" data-offlabel="STK" data-onstyle="primary" data-offstyle="warning">
</div>
<div class="col-3 pm-0 ">
<div class="input-group">
<input type="text" class="form-control input-lineitem-code px-1 " placeholder="Select Stock / GL ">
<!-- the stkgl edit btn -->
<div class="input-group-prepend position-relative">
<span class="input-group-text text-primary mdi mdi-magnify border-bottom-0 px-1 btn-lineitem-edit-stkgl cursor-pointer"> </span>
</div>
</div>
</div>
</div>
codes here...
Script
<code>$('.btn-lineitem-add-stkgl').on('click' , function(e) {
//clone with event the last lineitem-wrapper
new_lineitemStkGL = $('.lineitems-wrapper').last().find('.lineitem-wrapper').clone(true);
....
//tried the destroy and initialize method but same error
// $('.check-moduleId').bootstrapToggle('destroy');
//$('.check-moduleId').bootstrapToggle();
$('.lineitems-wrapper').append(new_lineitemStkGL);
});
</code>
<code>$('.btn-lineitem-add-stkgl').on('click' , function(e) {
//clone with event the last lineitem-wrapper
new_lineitemStkGL = $('.lineitems-wrapper').last().find('.lineitem-wrapper').clone(true);
....
//tried the destroy and initialize method but same error
// $('.check-moduleId').bootstrapToggle('destroy');
//$('.check-moduleId').bootstrapToggle();
$('.lineitems-wrapper').append(new_lineitemStkGL);
});
</code>
$('.btn-lineitem-add-stkgl').on('click' , function(e) {
//clone with event the last lineitem-wrapper
new_lineitemStkGL = $('.lineitems-wrapper').last().find('.lineitem-wrapper').clone(true);
....
//tried the destroy and initialize method but same error
// $('.check-moduleId').bootstrapToggle('destroy');
//$('.check-moduleId').bootstrapToggle();
$('.lineitems-wrapper').append(new_lineitemStkGL);
});