TimeEntry Js 函数不适用于动态添加的文本框答案

【问题标题】：TimeEntry Js function not working for Dynamically added textboxesTimeEntry Js 函数不适用于动态添加的文本框
【发布时间】：2014-06-26 06:13:20
【问题描述】：

<td style='vertical-align: middle;'><input name='DriveTimeDaySlots[" + index + "].StartTime' class='smallTxtEntry0 driveTimedaySlot  hasTimeEntry' id='DriveTimeDaySlots_" + index + "_StartTime' type='text' value='' onchange='driveTimeDaySlotValueOnchnge(this)' data-timeEntry='show24Hours: true, showSeconds: true, defaultTime: 00:00:00'/></td>" +
                "<td style='vertical-align: middle;'><input name='DriveTimeDaySlots[" + index + "].EndTime' class='smallTxtEntry0 driveTimedaySlot  hasTimeEntry' id='DriveTimeDaySlots_" + index + "_EndTime' type='text' value='' onchange='driveTimeDaySlotValueOnchnge(this)' data-timeEntry='show24Hours: true, showSeconds: true, defaultTime:00:00:00'/></td>" +
                "<td style='vertical-align: middle;'><input name='DriveTimeDaySlots[" + index + "].DefaultTimeTaken' class='smallTxtEntry0 driveTimedaySlot  hasTimeEntry' id='DriveTimeDaySlots_" + index + "_DefaultTimeTaken' type='text' value='' onchange='driveTimeDaySlotValueOnchnge(this)' data-timeEntry='show24Hours: true, showSeconds: true, defaultTime:00:00:00'/></td>" +

我在按钮单击时添加此文本框。在 Document.ready 我写过：

 $(document).ready(function () {      
    $('.driveTimedaySlot').timeEntry({ show24Hours: true, showSeconds: true, defaultTime: "00:00:00" });
});

但它不会触发动态添加的文本框

【问题讨论】：

注意：每当您提出任何特定于插件的问题时，请始终提供指向插件网站的链接，以便人们可以参考该链接，从而可以快速帮助您！并始终尝试创建一个描述您的问题的小提琴！

标签： javascript jquery .net asp.net-mvc-4

【解决方案1】：

您动态创建的新元素没有被 timeEntry 函数拾取，因为它是在您调用该函数之后创建的。因此，您需要做的是每次添加行后（在函数末尾）调用 timeEntry 函数。

function urfunction() {
   //Your codes
    $('.driveTimedaySlot').timeEntry({
    show24Hours: true,
    showSeconds: true,
    defaultTime: "00:00:00"
   });
}

【讨论】：

【解决方案2】：

我制作了一个demo JSFIDDLE 演示如何将TimeEntry 插件附加到动态添加的文本框。希望能帮助到你！这是代码： HTML：

<input type="button" id="add" value="Click to add textbox and attach TimeEntry plugin to it !">

JS：

$(document).ready(function(){

    $('#add').click(function(){
        //document.append('<input type="text">');
        $(document.createElement('input')).attr("id", 'defaultEntry').appendTo('body');
        $('#defaultEntry').timeEntry({show24Hours: true, showSeconds: true});
    });
});

【讨论】：

【解决方案3】：

问题出在仓促类我已将此类添加到动态添加的文本框中。这是造成问题的原因。我已经删除了 hastimentry 类并且它起作用了

【讨论】：

【解决方案4】：

您无法在 jQuery 中为动态创建的元素捕获任何事件。一个技巧是您将事件代码放在一个单独的函数中（如@Sridhar R 所述）：

function urfunction(elementId) {

    // ... any code you need to perform
    // on that jquery selector...

}

并将这个函数的名称放入一些on... html 属性（onchange、onclick 等）中：

<input id="eId" ... onclick="urfunction('eId')" ... />

【讨论】：