Ajax 渲染的按钮未触发点击事件

Question

我有一个Django模板，用来列出我们培训部门的课程安排。在这个列表中的每一项都有一个“名单”按钮，点击后会显示该课程的名单，并把它放到一个div里。这部分工作得很好。在这个页面上，还有一个JavaScript日期控件，用户可以选择一个课程日期，只查看那天的课程。不过，当课程列表是通过Ajax生成时，“名单”按钮的点击事件就没有反应了。

classes.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>

这部分是可以正常工作的。但是，当我处理选定的日期并生成那天的课程列表时，“名单”按钮就不管用了。

我的视图：

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语句，看看这个函数是否被调用，但结果并没有。有没有什么想法？我已经意识到这可能是我自己的一个愚蠢疏忽。

django javascript ajax 事件处理 DOM操作前端开发课程管理日期控件

Ajax 渲染的按钮未触发点击事件

1 个回答

撰写回答