Блог

Главная - Вопросы по программированию - Запускает событие пузырькового текстового поля при изменении даты

Запускает событие пузырькового текстового поля при изменении даты

#jquery #event-bubbling #event-capturing

#jquery #событие-пузырьковое #захват события

Вопрос:

  $(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>

У меня есть одна таблица. При нажатии на последний элемент строки я генерирую новую строку в таблице. У меня есть привязка функции Onclick к td .

Теперь у меня есть datetimepicker в td. У меня возникла проблема с привязкой даты, нажав datepicker и сохранив ее, потому что она запускает функцию td onclick.

Я хочу сначала привязать дату, затем сохранить дату с помощью функции onchange ввода, а затем создать строку.

Любая помощь приветствуется.

 <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>

Обновить
Вот моя функция генерации строки:

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

Теперь проблема заключается в том, что он генерирует только функцию строки, но не реализует логику. Я думаю, это не захватывает его. Не могли бы вы помочь?

Я хочу выбрать дату из datepicker и одновременно сгенерировать строку.

Ответ №1:

Вы можете передать event в качестве дополнительного аргумента обработчику события (это работает в разных браузерах, даже в современных браузерах, которые не предоставляют глобальный event объект) и проверить наличие целевого элемента.

Если пользователь нажал на элемент ввода, вернитесь true , чтобы позволить браузеру продолжить обычную работу, в противном случае выполните код вставки строки.

(Я изменил input тип на date для демонстрационных целей.)

 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>

Комментарии:

1. Не могли бы вы помочь мне с моим обновлением, о котором идет речь?

2. Вы привязываетесь к щелчку в обработчике щелчков. Это действительно то, что вы пытаетесь сделать? Также tblMatrix_90_2866 в вашей разметке нет элемента с идентификатором для привязки.

3. tblMatrix_90_2866 — это идентификатор таблицы, и да, у меня есть метка, выпадающий список в другой ячейке, для которой я использую обработчик щелчков для ввода данных в элементы управления и создания строки

4. Я думаю, было бы справедливо, если бы вы приняли ответ, если бы он решил вашу первоначальную проблему и опубликовал любые дополнительные вопросы как свои собственные. В любом случае, если вы не видите свой код как полностью рабочий пример, демонстрирующий проблемы, с которыми вы сталкиваетесь, в любом случае, не так много нужно сделать, чтобы помочь вам.

5. Я создал аналогичный образец.