trentrichardson / jQuery-Timepicker-Addon

Adds a timepicker to jQueryUI Datepicker
http://trentrichardson.com/examples/timepicker/
MIT License
2.66k stars 1.05k forks source link

Doesn`t work after multiple appends #899

Open PaykomanVll opened 8 years ago

PaykomanVll commented 8 years ago

Hello,

i like your Plugin and i use it on a long time but now i have a problem :( I use it for set a start and a end date with a time but i have multiple rows...

My default row (template)

<div id="newDisRow" class="cal" style="display:none;">
            <input type="hidden" name="dis_id[]" value="new" />
            <input type="hidden" name="dis_aid[]" value="<?php echo $this->aid; ?>" />
            <span><input name="dis_start[]" type="text" class="dateInput dateFrom required" value="" /></span>
            <span><input name="dis_end[]" type="text" class="dateInput dateTo required"value="" /></span>
            <span><input name="dis_dis[]" type="number" step="any required" value="" /></span>
            <span>
                <select name="dis_b2c[]">
                    <option value="1" selected="SELECTED">Ja</option>
                    <option value="0">Nein</option>
                </select>
            </span>
            <span>
                <select name="dis_b2b[]">
                    <option value="1">Ja</option>
                    <option value="0" selected="SELECTED">Nein</option>
                </select>
            </span>
            <a class="ui-button only-icon remSetupRow" data-icon="trash" href="#" tabindex="-1"></a>
        </div>

On top of this row i have a php foreach to load exists items from database and on bottom of my list of dates i have a button to add a new row, This button cloned this default row and put to my div...

that is on my $(document).ready(function() :

/** add new qd */
$('#addDis').on('click', function(e){
    var newRow = $('#newDisRow').clone().show(), // .removeAttr('id')
        pickerID = $("#disList > div").length;

    newRow.find('.dateFrom').attr('id', 'dateFrom_'+pickerID);
    newRow.find('.dateTo').attr('id', 'dateTo_'+pickerID);
    $('#disList').append( newRow );
});

$('body').on('focus','.dateInput', function(){
            var el = this;
            if( $(el).hasClass('hasDatepicker') === false )  {
                $(el).datetimepicker({
                    timeFormat: 'HH:mm',
                    timeInput: true,
                    stepHour: 1,
                    stepMinute: 15,
                    constrainInput: false,
                    // altFieldTimeOnly: false,
                    beforeShow: function(input, inst) { inst.dpDiv.addClass('qdDate'); }
                });
            }
        });

On the first klick will work all fine but at the next click not more :( If i have luck will one of both dateInput work if not then work no picker and i get not a error or callback :(