dynaimcally追加された要素にdatepickerをバインドする方法

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()をしたときは、必ず一つだけ.eventDiv

はここworking fiddleだ持っていたので、

あなたが実際に親html要素を除去しています。

$(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) 
    }); 

});