onchangeDate不会在克隆的datepicker对象上触发

我正在处理项目的项目（请参阅我之前的问题： validate-dynamic-table-rows-on-event-listeners / 42408354＃42408354 ）我的表行在成功处理后被克隆。 我必须清除所有输入，更改嵌套的html对象的类和ID，除了onchangeDate事件侦听器之外，一切正常。

我正在使用jQuery.dataTables来填充我的表，而complete: function是我将datepickers绑定到我的tr tds中的原始输入html元素的地方。 而不是由datepickers分配的dp126353729 ID我使用我的ID的行号，这根本不是问题。

我的问题是，当我关闭我的日期选择器时，我使用onchangeDate事件来触发onfocusout事件，以便使用新日期处理我的表行。 我不得不通过使用setTimeout来玩游戏，让事件监听器首先获取新日期！

克隆的datepicker元素不会触发onchangeDate 。 我试图将它们绑定到这个事件没有任何运气。 使用默认ID也没有帮助。

这是一个JSFIDDLE，用于显示克隆的日期选择器如何触发onfocusout

这是我的代码：

  var DatePicker = function(that){ if (jQuery().datepicker) { alert(that.attr('id')); that.datepicker({ showOn: "button", buttonImage: "/images/calendar.png", buttonImageOnly: true, buttonText: 'Select a start buying date', changeMonth: true, changeYear: true, beforeShow: function() { setTimeout(function(){ $('.ui-datepicker').css('z-index', 100100); }, 0); }, onSelect: function () { $('.item-failure').addClass("hidden").hide(); $(this).removeClass("error").tooltip("disable").tooltip("hide"); $('.ui-datepicker').css('z-index', -1); setTimeout(function(){ //allows date to catchup },0); }, onClose: function(){ $(this).trigger("changeDate"); }, minDate: '+1', // The min date that can be selected, ie 30 days from the 'now' maxDate: '+1y' // The max date that can be selected, ie + 1 month, 1 week, and 1 days from 'now' // HR MIN SEC MILLI //new Date().getTime() + 24 * 60 * 60 * 1000) }).datepicker(); if($(this).hasClass("newDp")){ $(this).bind("changeDate"); } } } 

在这里你可以看到我触发了focusout事件，它反过来会对所有行进行validation和处理：

 $(".dp").on("changeDate",function(e){ e.stopImmediatePropagation(); $(this).trigger("focusout"); alert("onchange date" + $(this).val()); }); 

从那里处理行的事件：

  //Iterates thru the entire row when date changed $(".dp").on("keyup focusout",function (e) { e.stopImmediatePropagation(); //reset validators $(".qty").rules('remove','min'); $(".qty").rules('remove','max'); $(".qty").rules('remove','required'); hasQtys = false; hadOtherQtys = false; var row = $(this).closest('tr'); $(this).rules('add',{required:true,messages:{required:"Must supply a start buy date."}}); $(this).rules('add',{UsaDate:true,messages:{UsaDate:"Enter date in mm/dd/yyyy format"}}); var buydate = $(this); var num = 0; var dow = ''; var delday = ''; var quans = 0; flag = true; var qty = $(); var Error = false; //console.log("dp triggered" + e.type); //only check date when manually entered. if(e.type === "keyup" && ($(this).valid() === false || $(this).val() ==="")) { console.log(e.type + $(this).valid()); $(this).addClass("error").tooltip("enable").show(); $('item-failure').removeClass("hidden").html("You have some errors. See below.").show(); Error = true; } //check for qtys in row before processing row.children("td").each(function(index){ qty = $(this).find(".qty"); //processes the inputs within the row ProcessRequest(row, qty,dow); }//eof qty.val undefined });//eof td children }//eof error });//eof event datepicker listener 

以下是在complete: function上创建的datepicker的屏幕截图，其中dataTables成功触发此函数

 onClose: function(){ $(this).trigger("changeDate"); }, 

这是克隆的datepicker屏幕截图，它不会触发此函数：

 onClose: function(){ $(this).trigger("changeDate"); }, 

这是我在处理时克隆datepicker的代码：

 var ProcessRequest = function(tr, count,delday){ var dp = tr.find("[name='BUYDATE']"); //clear all errors tr.children("td").each(function(){ $(this).find(".qty").removeClass("error").tooltip("disable").tooltip("hide"); }); //insert new row because we create new row off emptyRow if(tr.find(".itno").hasClass("EmptyRow") && flag == true){ console.log("this was an .EmptyRow"); var $clone = tr.clone(); $clone.insertBefore(tr); //clear inputs $clone.children("td").each(function(){ var $input = $(this).find("input"); $input.val(""); }); //destroy datepicker var dp = $clone.find(".dp"); dp.remove(); //create new DatePicker(dp); var dpId = $('#table_001 tr').length + 1; $clone.find("td:eq(13) span").html(""); dp = $clone.find(".dp"); dp.attr('id',dpId); DatePicker(dp); } 

---

解决方案：感谢armesian，我提出了这个解决方案：

 var DatePicker = function(that){ if (jQuery().datepicker) { //alert(that.attr('id')); that.datepicker({ showOn: "button", buttonImage: "/images/calendar.png", buttonImageOnly: true, buttonText: 'Select a start buying date', changeMonth: true, changeYear: true, beforeShow: function() { setTimeout(function(){ $('.ui-datepicker').css('z-index', 100100); }, 0); }, onSelect: function () { $('.item-failure').addClass("hidden").hide(); $(this).removeClass("error").tooltip("disable").tooltip("hide"); $('.ui-datepicker').css('z-index', -1); setTimeout(function(){ //allows date to catchup },0); }, onClose: function(){ $(this).trigger("changeDate"); }, minDate: '+1', // The min date that can be selected, ie 30 days from the 'now' maxDate: '+1y' // The max date that can be selected, ie + 1 month, 1 week, and 1 days from 'now' // HR MIN SEC MILLI //new Date().getTime() + 24 * 60 * 60 * 1000) }).datepicker(); if($(this).hasClass("newDp")){ $(this).bind("changeDate", function(e) { // this is the missing part in my opinion e.stopImmediatePropagation(); $(this).trigger("focusout"); alert("onchange date" + $(this).val()); }); //Dynamic binding on cloned datepickers only $(this).on("focusout",function(){ RowValidation($(this)); }); } 

}}

Answer 1

对于我所能看到的，我将指出一条线，我认为这是修复需要去的地方。

我假设在这一行中你的意图是将changeDate事件绑定到新创建的元素，但绑定缺少在触发事件时将执行的实际函数：

 // corrected version would be if($(this).hasClass("newDp")){ $(this).bind("changeDate", function(e) { // this is the missing part in my opinion e.stopImmediatePropagation(); $(this).trigger("focusout"); alert("onchange date" + $(this).val()); }); } 

@yardpenalty你快到了！ 您忘记将onfocusout事件绑定到克隆的dp。 您可以在dp.addClass("newDp");之后添加以下行dp.addClass("newDp"); 应该解决它：

 dp.on("focusout",function(){ $("
").insertBefore("#table_001"); }); 

这是JSFIDDLE的工作原理