Ajax请求完成后执行函数

Question

以下是我要做的事情：

1. 通过Ajax（完整）
引入一些JSON
2. 从该JSON构建一个对象数组（完整）
3. 根据这些对象（完整）渲染出underscore.js模板
4. 渲染模板后，在新标记上设置一些事件处理程序

我挂了最后一部分。我需要在模板渲染后才启动EXAMPLE.ToggleEventDetails()。现在，EXAMPLE.ToggleEventDetails()在文档就绪时执行，jQuery单击处理程序不会拾取任何元素。

感谢您的帮助！

---

的JavaScript：

var EXAMPLE = EXAMPLE || {};

EXAMPLE.BuildEventFeed = function() {
  var eventsFeedFile = "/assets/json/events.json",
      eventId1 = 2464,
      eventId2 = 2463;

  // Get the JSON
  $.ajax({
    url: eventsFeedFile,
    dataType: "json",
    success: function(data) { pushDatatoArray(data); }
  });

  // Build an array from the JSON
  pushDatatoArray = function(data) {
    var rawEvents     = data.events,
        dataLength    = rawEvents.length,
        eventsArray   = [];

    for ( var i = 0; i < dataLength; i++ ) {
      // Only add to the array if the 'asset id' is correct
      if ( rawEvents[i].assets[0].id === eventId1 || rawEvents[i].assets[0].id === eventId2 ) {
        eventsArray.push(rawEvents[i]);
      }
    }

    // Render the events into a template
    var events = { events: eventsArray };
    var template = $('#event-template').html();
    $('#events-list').html(_.template(template, events));

    console.log(events);

  };

}; // END EXAMPLE.ParseEventFeed

EXAMPLE.ToggleEventDetails = function() {
  $('.event-details-toggle').click(function(e) {
    e.preventDefault();
    console.log('click!');
  });
}; // END EXAMPLE.ToggleEventDetails

$(document).ready(function($) {
  new EXAMPLE.BuildEventFeed();
  new EXAMPLE.ToggleEventDetails();
});

---

下划线模板：

<script id="event-template" type="text/html">
<% _.each(events, function(event) { %>

  <li class="event">
    <a href="#" class="event-details-toggle">
      <span class="dates">JAN 01</span>
      <span class="name"><%= event.event_name %></span>
      <span class="venue"><%= event.venue_name %></span>
      <span class="location"><%= event.city %>, <%= event.state %></span>
    </a>

    <div class="event-details">
      <ul>
        <li class="start-date">
          <span class="label">Starts:</span>
          <span class="value">Jan 1, 12:00am</span>
        </li>
        <li class="end-date">
          <span class="label">Ends:</span>
          <span class="value">Jan 1, 12:00am</span>
        </li>
        <li class="venue">
          <span class="label">Location:</span>
          <span class="value"><%= event.venue_name %></span>
        </li>
        <li class="address">
          <span class="label">Address:</span>
          <span class="value">
            <%= event.street_address1 %>
            <% if (event.street_address2) { %>
              <%= event.street_address2 %>
            <% } %>
            <%= event.city %>, <%= event.state %> <%= event.zip %>
          </span>
        </li>
      </ul>

      <a href="#" class="map-btn">Map It</a>
    </div>
  </li>

<% }); %>
</script>