javascript - Ajax 呈现的按钮未触发单击事件

Question

我有一个 Django 模板，其中列出了我们培训部门的预定类(class)。对于列表中的每个项目，都有一个名册按钮，单击该按钮会拉出该类(class)的类(class)名册并将其放入 div 中。效果很好。在此页面上还有一个 Javascript 日期控件，允许用户选择类(class)日期并仅查看当天举行的类(class)。但是，当从 Ajax 生成类(class)列表时，不会触发 Roster 按钮单击事件。

类.html

<h1>Upcoming Classes</h1>
Class Date: <input type='text' id='datepicker' name='date'/>
<div id='class_listing'>
<ul id='class_list'>
{% if classes %}
{% for c in classes %}
<li>
    <div class='class_info'>
        <ul class='class_list_item'>
            <li>
                <h4>
                    <a href="{% url 'training:class_detail' c.id %}">
                        {{ c.course.course_name }}
                    </a>
                </h4>
            </li>
            <li>
                <h6>
                    Start Date: {{ c.get_start_date }}
                </h6>
            </li>
            <li>
                <h5>{{ c.location }}</h5>
            </li>
            <li>
                <button class='list_button' value='{{ c.id }}'>Roster</button>
            </li>
        </ul>
 <div class='roster'></div>
<div class='button_menu'><button>Test</button></div>
</div>
</li>
{% endfor %}
</ul>
{% else %}
<p>No classes available</p>
{% endif %}
</div>

这有效。但是，当我处理所选日期并生成该日期的类(class)列表时，名册按钮不起作用。

我的看法:

def getclasslisting(request):
    if request.method == 'GET':
        date = request.GET['date']
        month, day, year = date.split('/')
        formatted_date = year + '-' + month + '-' + day
        schedule = Schedule.objects.filter(class_date=formatted_date)
        if not schedule:
            html = '<h4>No classes scheduled on ' + formatted_date + '</h4>'
        else:
            html = "<ul id='class_list'>"
            for s in schedule: 
                html += "<li><div class='class_info'><ul class='class_list_item'>"

                html += "<li><h4><a href='#'>" + s.scheduled_class.course.course_name + "</a></h4></li>"

                html += "<li><h6>Start Date: " + s.scheduled_class.get_start_date() + "</h6></li>"

                html += "<li><h5>" + s.scheduled_class.location.name + "</h5></li>"

                html += "<li><button class='list_button' value='" + str(s.scheduled_class.id) + "'>Roster</button></li></ul>"

                html += "<div class='roster'></div><div class='button_menu'></div></div></li></ul>"

    else:
        pass
    return HttpResponse(html)

最后，JavaScript:

$( document ).ready(function() {
$('#toggle').click(buildMenu);
$('.list_button').click(getRoster);
$("#datepicker").datepicker({
    onSelect: function(dateText) {
        var date = $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
        $.get('/training/getclasslisting', {date:date}, function(data){
            $('#class_listing').empty();
            $('#class_listing').append(data);
        });
        //alert("Selected date: " + dateText + "; input's current value: " + date);
    }
});
})

function getRoster() {
var roster = $(this).closest("ul").next();
var id = parseInt(this.value);
$.get('/training/getroster', { id:id}, function(data){
    if (roster.is(':empty')) {
        roster.append(data);
    } else {   
        roster.empty();
    }
    alert("Clicked!");
});
}

我最初认为这是 HTML 页面(可以工作)和 javascript(不能工作)之间 DOM 的差异，但我已经检查过了。此外，我还向 javascript 添加了 alert 语句，以查看该函数是否被调用，但事实并非如此。有任何想法吗？我已经接受了这样一个事实:这是我的一个愚蠢的疏忽。

Answer 1

尝试:

$('body').on('click', '.list_button', function(){
....
});

但是这是一个客户端问题。