Trigger textbox bubble event on date change

Question

 $(document).ready(function () {

            var lblupdate = $(".lblupdate");
            for (var i = 0; i < lblupdate.length; i++) {
                lblupdate[i].addEventListener('click', OnLabelClick);
            }  
            });
            
function OnLabelClick() {
alert(3);
    $('.updatedisplay').addClass("hide");
    $('.lblupdate').removeClass("hide");
    var inputCtrl = $(this).attr('id').replace("lbl", "DetailDataValueId");
    $(this).addClass("hide");
    $("#" + inputCtrl).removeClass('hide');
    $("#" + inputCtrl).show();
    $(this).parent().find('a').removeClass("hide");
}
function GenerateRow(param1,pram2,param3){

 $("#tblMatrix_89_2867").on('click', 'tr:last', function (e) {
   
 var $tr = $(this).closest('.trbar');
 var currentRow = $(this).find('td:first').text();
 if ($(this).closest('.trbar').is(":last-child")) {
   var $clone = $tr.clone(true);
   $clone.find(':text').val('');
                
   $clone.find('td').each(function (item) {
    $(this).attr("data-rowindex", parseInt(currentRow) + 1);
   });
                    
   $tr.after($clone);         
                
  }
 });
}
                

.hide{
      display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="tblMatrix_89_2867" class="table table-bordered2 table-vmiddle table-sm2 mb-10 table_form_controls pematrix-table">
                <thead>
                        <tr>
                                                            <th>
                                    <div class="input-group input-group-outer" style="color:#8e8d8d;font-weight:bold">
                                        Header 1
                                        <span class="input-group-addon p-0">
                                            
                                        </span>
                                    </div>
                                </th>
                                <th>
                                    <div class="input-group input-group-outer" style="color:#8e8d8d;font-weight:bold">
                                        Header 2
                                        <span class="input-group-addon p-0">
                                            
                                        </span>
                                    </div>
                                </th>
                        </tr>
                </thead>
                <tbody>
                        <tr class="trbar " data-matrixid="0">                            

                            
                                <td data-findingid="2867" data-matrixconfigid="89" data-celldefaultvalue="04/10/2019" data-systemid="455" data-rowindex="1" data-columnindex="1" data-matrixdetailid="0" data-isfortextboxofdd="False" data-celldatatype="0" data-celltypeid="3" data-isserialnoadded="False" class="tdbar no-ellipsis " onclick="GenerateRow(89,2867,event);">
                                    

                                    

                                            <input id="DetailDataValueId_947_2867" style="color:#8e8d8d;font-weight:bold" type="date" value="04/10/2019" onchange="SaveMatrixData(this, '0', 89, 0, '947_2867');" data-rowindex="1" data-columnindex="1" class="form-control input-xs customdatepicker customfield datePicker" autocomplete="off">
                                                                    </td>
                                <td data-findingid="2867" data-matrixconfigid="89" data-celldefaultvalue="" data-systemid="455" data-rowindex="1" data-columnindex="2" data-matrixdetailid="0" data-isfortextboxofdd="False" data-celldatatype="0" data-celltypeid="1" data-isserialnoadded="False" class="tdbar no-ellipsis relative" onclick="GenerateRow(89,2867,event);">
                                    

                                    

                                            <label data-rowindex="1" id="lbl_949_2867" data-columnindex="2" style="color:#8e8d8d;font-weight:bold" class="form-control input-xs ml-2 control-label2 lblupdate">123</label>
                                            <div class="input-group input-group-outer">
                                                <input type="text" id="DetailDataValueId_949_2867" style="color:#8e8d8d;font-weight:bold" class="form-control input-xs txtChildvalue hide updatedisplay" value="" autocomplete="off">
                                               
                                            </div>
                                                                    </td>
                        </tr>
                </tbody>
        </table>

I have one table. On clicking of last row element I am generating new row to the table. I have Onclick function bind to the td.

Now I have datetimepicker within td. I am having issue binding date by clicking datepicker and saving the same because it triggers td onclick function.

What I want is to bind date first then save the date by onchange function of input and then create the row.

Any help is appreciated.

<td data-findingid="2866" data-matrixconfigid="2" data-celldefaultvalue="04/08/2019" data-systemid="455" data-rowindex="3" data-columnindex="3" data-matrixdetailid="1788" data-isfortextboxofdd="False" data-celldatatype="0" data-celltypeid="3" data-isserialnoadded="True" class="no-ellipsis relative" onclick="GenerateRow(2,2866);">                                
  <input id="DetailDataValueId_1788_2866" type="text" value="04/08/2019" onchange="SaveMatrixData(this, '0', 2, 46, 1788_2866);" data-rowindex="3" data-columnindex="3" class="form-control input-xs customdatepicker customfield datePicker" autocomplete="off">
  </td>

Update Here is my Generate row function:

   function GenerateRow(MatrixConfigId, FindingId, e) {
        $('#tblMatrix_90_2866').on('click', 'tr:last', function (e) {
          //It does not call this part
        });
    }

Now, problem is it comes to Generate row function only but does not implement the logic. I guess it is not capturing it. Will you please help?

What I want is to select date from datepicker and at the same time generate row too.

Answer 1

You can pass event as an additional argument to the event handler (this works cross-browser, even in modern browsers that don't provide a global event object) and check for the target element.

If the user clicked an input element, return true to let the browser proceed with the normal operation, otherwise execute your row insertion code.

(I changed the input type to date for demonstration purposes.)

function GenerateRow(row, id, target) {
  if (target.tagName === 'INPUT') {
    console.log('proceed with date picker');
    return true;
  }
  console.log('would insert row now');
}

<table>
  <tr>
    <td data-findingid="2866" data-matrixconfigid="2" data-celldefaultvalue="04/08/2019" data-systemid="455" data-rowindex="3" data-columnindex="3" data-matrixdetailid="1788" data-isfortextboxofdd="False" data-celldatatype="0" data-celltypeid="3" data-isserialnoadded="True" class="no-ellipsis relative" onclick="GenerateRow(2,2866,event.target);">                                
      Other row content, click to insert row <input id="DetailDataValueId_1788_2866" type="date" value="04/08/2019" onchange="SaveMatrixData(this, '0', 2, 46, 1788_2866);" data-rowindex="3" data-columnindex="3" class="form-control input-xs customdatepicker customfield datePicker" autocomplete="off">
    </td>
  </tr>
</table>