jQuery，Handlebars和AJAX，传入不正确的responseText

Question

我一直在从Jeffrey Way的一系列视频中学习jQuery，而且我无法弄清楚为什么我没有得到正确的答案才能出现在我的AJAX电话上。

视频链接:(在24:00分钟左右开始）https://www.youtube.com/watch?v=L3cx7ryQsSk

我没有从用户那里获取数据，而是获得了responseText：

我已经多次重做教程并复制了源代码，但仍然得到了相同的结果。

有人能说清楚我做错了吗？

模板

<div class="employee_info">
    <script id="employee_info_template" type="text/x-handlebars-template">
        <p>{{info}}</p>
        <span class="close">X</span>
    </script>
</div>

的index.php

if (isXHR() && isset($_POST['q'])) {
echo json_encode(getEmployeesByLastName($_POST['q']));
return;
}

if (isset($_POST['q']) ) {
$employees = getEmployeesByLastName($_POST['q']);
}

if (isXHR() && isset($_POST['employee_id'])) {
$info = getEmployeeInfo($_POST['employee_id']);
echo $info->department;
return;
}

jquery代码（应该显示authorinfo）

displayAuthorInfo: function(e) {
        var self = Employees;

        self.config.employeeInfo.slideUp( 300 );

        var jqxhr = $.ajax({
            data: {
                employee_id: $(this).data('employee_id')
            }

        }).done(function(results) {
            self.config.employeeInfo.html(self.config.employeeInfoTemplate({ info: results })).slideDown(300);
        });
        console.log(jqxhr);

        e.preventDefault();

    },
    closeOverlay: function() {
        Employees.config.employeeInfo.slideUp(300);
    }

整个jquery

var Employees = {
    init: function(config) {
        this.config = config;
        this.setupTemplates();
        this.bindEvents();

        $.ajaxSetup({
            url: 'index.php',
            type: 'POST'
        });

        $('button').remove(); // remove submit button
    },
    bindEvents: function() {
        this.config.letterSelection.on('change', this.fetchEmployees);
        this.config.employeesList.on('click', this.displayAuthorInfo);
        this.config.employeeInfo.on('click', 'span.close', this.closeOverlay);

    },
    setupTemplates: function() {
        this.config.employeeListTemplate = Handlebars.compile(this.config.employeeListTemplate);
        this.config.employeeInfoTemplate = Handlebars.compile(this.config.employeeInfoTemplate);

        Handlebars.registerHelper('fullName', function(employee) {
           return employee.first_name + ' ' + employee.last_name;
        });
    },
    fetchEmployees: function() {
        var self = Employees;

        $.ajax({
            data: self.config.form.serialize(),
            dataType: 'json',
            success: function(results) {
                self.config.employeesList.empty();

                if (results[0]) {
                    self.config.employeesList.append(self.config.employeeListTemplate(results));
                } else {
                    self.config.employeesList.append('<li>Nothing returned</li>');
                }
            }
        });
    },
    displayAuthorInfo: function(e) {
        var self = Employees;

        self.config.employeeInfo.slideUp( 300 );

        var jqxhr = $.ajax({
            data: {
                employee_id: $(this).data('employee_id')
            }

        }).done(function(results) {
            self.config.employeeInfo.html(self.config.employeeInfoTemplate({ info: results })).slideDown(300);
        });
        console.log(jqxhr);

        e.preventDefault();

    },
    closeOverlay: function() {
        Employees.config.employeeInfo.slideUp(300);
    }

};

Employees.init({
    letterSelection: $('#q'),
    form: $('#employee-selection'),
    employeeListTemplate: $('#employee_list_template').html(),
    employeeInfoTemplate: $('#employee_info_template').html(),
    employeesList: $('ul.employee_list'),
    employeeInfo: $('div.employee_info')
});

Answer 1

想出来，在我的JS脚本中的bindEvents：函数中缺少li。

特别是这一行：

this.config.employeesList.on（'click'，'li'，this.displayAuthorInfo）;