0
我目前工作的一個項目（見我剛纔的問題：validate-dynamic-table-rows-on-event-listeners/42408354#42408354）的項目中，我的桌子排在成功處理克隆。我必須清除所有的投入，改變嵌套的HTML對象的class和id，一切工作正常，除了onchangeDate事件偵聽器。onchangeDate不觸發克隆對象的日期選擇器
我使用jQuery.dataTables來填充我的表和complete:功能是我結合我datepickers我的TR TDS在我的原始輸入HTML元素。而不是由datepickers分配的dp126353729 ID，我使用行號爲我的ID，這根本不是問題。
我的問題是，我使用onchangeDate事件觸發onfocusout事件時關閉我的日期選擇器，所以我的錶行被處理與新的日期。我必須使用setTimeout來玩遊戲，讓活動聽衆首先拿起新的日期！
克隆的日期選擇器元件沒有觸發onchangeDate。我試圖將他們綁定到這個事件上，但沒有任何運氣。使用默認的ID也沒有幫助。
這裏是一個JSFIDDLE顯示克隆datepickers的arent如何觸發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, i.e. 30 days from the 'now'
maxDate: '+1y' // The max date that can be selected, i.e. + 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");
}
}
}
在這裏你可以看到，我觸發事件的內容事件，輪流做所有該行驗證和處理：
$(".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:函數創建了數據表一個datepicker從該函數觸發的屏幕截圖成功地
onClose: function(){
$(this).trigger("changeDate");
},
這裏是克隆日期選擇器屏幕截圖，不消防此功能：
onClose: function(){
$(this).trigger("changeDate");
},
這裏就是我在處理克隆的日期選擇器代碼：
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("<input name='BUYDATE' class='dp newDp form-control-inline' style='width:95px'; />");
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, i.e. 30 days from the 'now'
maxDate: '+1y' // The max date that can be selected, i.e. + 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));
});
}
} }
如果附加一個小的工作示例HTML + JavaScript的，你會得到更快的響應 – artemisian
問題是我的服務器端上一個as400！如果不重寫整個服務器端程序，就不能真正重新創建這個問題。我將附上截圖以顯示發生的情況。好吧，我想我可以創建一個克隆表格行的按鈕。 :-) – yardpenalty
請檢查我的答案 – artemisian