TimeEntry Js function not working for Dynamically added textboxes

Question

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

I am adding this textboxes on button click. On Document.ready i have written:

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

But it is not firing for dynamically added textboxes

Answer 1

New element you created dynamically had not been picked up by the timeEntry function because it is created after you call that function. So what you need to do is calling the timeEntry function each time after you add the row(at the end of function ).

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

Answer 2

You can't catch any event for dynamically created elements in jQuery. One trick is that you put your event code in a separate function (as mentioned by @Sridhar R) :

function urfunction(elementId) {

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

}

and put the name of this function into some on... html attribute(onchange, onclick, etc.) :

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

Answer 3

I have made a demo JSFIDDLE demonstrating how to attach TimeEntry plugin to dynamically added textbox . Hope it helps ! Here is the code: 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});
    });
});

Answer 4

The problem was with hastimentry class i have added this class to dynamically added textbox. which was causing the problem. I have removed hastimentry class and it worked