如何將日期選擇器綁定到動態添加的元素

Question

我無法弄清楚如何在下面的小提琴示例中添加事件處理程序來動態添加html。通過搜索，我意識到你必須將處理程序委託給最初在頁面上的元素。不過，我將新添加的元素傳遞到一個模塊（dateTimeRangeWidget）中，該模塊設置了所有內容。

https://jsfiddle.net/burtonrhodes/u2L2epmz/

HTML

<h3> 
    Date Picker Test 
    <a href="#" id="do_addEvent" class="btn btn-warning pull-right"> 
    Add Event 
    </a> 
</h3> 
<hr/> 

<form> 

    <div class="eventsDiv"> 

    <!-- Event[0] --> 
    <div class="eventDiv" data-id="0"> 
     <div class="row"> 
     <div class="form-group col-xs-3"> 
      <label>Start Date</label> 
      <input type="text" name="event[0].startDate" class="form-control startDate"> 

      <div class="checkbox"> 
      <label> 
       <input type="checkbox" name="event[0].allDayEvent" class="allDayEvent" /> 
       All Day Event 
      </label> 
      </div> 
     </div> 

     <div class="form-group col-xs-3 timeDiv"> 
      <label>Start Time</label> 
      <input type="text" name="event[0].startTime" class="form-control startTime"> 
     </div> 
     <div class="form-group col-xs-3"> 
      <label>End Date</label> 
      <input type="text" name="event[0].endDate" class="form-control endDate"> 
     </div> 

     <div class="form-group col-xs-3 timeDiv"> 
      <label>End Time</label> 
      <input type="text" name="event[0].endTime" class="form-control endTime"> 
     </div> 
     </div> 
     <hr/> 
    </div> 

    </div> 
    <!-- ./eventsDiv --> 
</form> 

JS

$(document).ready(function() { 

    // Wire do_addEvent button 
    $("#do_addEvent").on("click", function(event) { 

    // Copy and add evenDiv html at the bottom 
    var lastEventDiv = $("div.eventDiv").last(); 
    var newEventDiv = $(lastEventDiv).after($(lastEventDiv).html()); 

    // TODO rename input variable names here with newId 
    // --- code here -- 

    // Setup the new eventDiv 
    // !!! This doesn't work !!! 
    setUpEventDiv(newEventDiv); 

    event.preventDefault(); 
    }); 

    // Setup all eventDiv's when the page loads 
    $("div.eventDiv").each(function(index, eventDiv) { 
    // Wire the eventDiv 
    setUpEventDiv(eventDiv) 
    }); 

}); 

/** 
* Finds all the div elements and calls setupDateTimePicker 
*/ 
function setUpEventDiv(eventDiv) { 
    var $startDateTextBox = $(eventDiv).find('.startDate:first').datepicker(); 
    var $endDateTextBox = $(eventDiv).find('.endDate:first'); 
    var $startTimeTextBox = $(eventDiv).find('.startTime:first'); 
    var $endTimeTextBox = $(eventDiv).find('.endTime:first'); 

    var $allDayEventCheckBox = $(eventDiv).find('.allDayEvent:first'); 
    var $timesDiv = $(eventDiv).find('.timeDiv'); 

    // Setup time picker 
    setupDateTimePicker($startDateTextBox, $startTimeTextBox, 
    $endDateTextBox, $endTimeTextBox, 
    $allDayEventCheckBox, $timesDiv); 
} 

/** 
* Sets up the custom date/time picker widget 
*/ 
function setupDateTimePicker($startDate, $startTime, 
    $endDate, $endTime, 
    $allDayEvent, $timesDiv) { 

    var mydtrw = dateTimeRangeWidget(jQuery); 
    mydtrw.init({ 
    $startDateElem: $startDate, 
    $endDateElem: $endDate, 
    $startTimeElem: $startTime, 
    $endTimeElem: $endTime, 
    $allDayEventElem: $allDayEvent, 
    $timeElements: $timesDiv 
    }); 
} 

Answer 1

有在你的代碼的一些錯誤。

當你這樣做$(lastEventDiv).html()你實際上提父HTML元素，所以你總是剛一.eventDiv

這裏有一個working fiddle。

$(document).ready(function() { 

    // Wire do_addEvent button 
    $("#do_addEvent").on("click", function(event) { 

    // Copy and add eventDiv html at the bottom 
    var lastEventDiv = $("div.eventDiv").last(); 
    var newEventDiv = lastEventDiv.clone(); //clone the last event div. When you were adding it with .html(), you were removing the parent tags so you never had a second .eventDiv. 

    var newId = $("div.eventDiv").length; //lets get a unique ID. This should change in your code for something better. 
    newEventDiv.data('id', newId); //change id 

    //change the id and name atributes for it to work correctly 
    $.each(newEventDiv.find('input'), function(index, element) { 
     $(element).attr('id', 'input' + Math.round(Math.random()*100)); 
     $(element).attr('name',$(element).attr('name').replace(/\[\d+](?!.*\[\d)/, '[' + newId + ']')); 
     $(element).removeClass('hasDatepicker'); //remove the hasDatepicker class for the plugin to work correctly. 
    }) 

    lastEventDiv.after(newEventDiv); //append id after the last event div 

    // TODO rename input variable names here with newId 
    // --- code here -- 

    // Wire the new eventDiv date/time picker 
    // !!! This doesn't work !!! 

    setUpEventDiv(newEventDiv); 

    event.preventDefault(); 
    }); 

    // Loop through event divs and wire actions for each section 
    $("div.eventDiv").each(function(index, eventDiv) { 
    // Wire the eventDiv 
    setUpEventDiv(eventDiv) 
    }); 

});