jquery - 使用 jquery 将事件绑定(bind)到 ajax 加载的内容

Question

我有一些使用 ajax 加载的选项卡。我通过 HTML 获取内容并将其插入到页面中。棘手的部分是，当我使用 ajax 加载新内容时，我需要监听新内容的其他事件并对新内容执行其他任务。这是我的目标:

var Course = {   

    config: {
        page: 'description'
    }

    init: function() {
        $('a.show-details').on('click', this.loadCourse);
    },

    loadCourse: function() {
        var courseId = $(this).parent().data('course_id'),
            item_content = $(this).parents('div.item').children(),
            path = 'main/ajaxjson/load_course_details';

        if ($(this).parents('h1.more').hasClass('current')) {
            $(this).parents('h1.more').removeClass('current');
        } else {
            $(this).parents('h1.more').addClass('current');
        }
        $(item_content[2]).slideToggle();
        Course.doAjax(courseId, path);
    },


    doAjax: function(courseId, path) {
        $.ajax({
            type: 'POST',
            url: ROOT_PATH + path,
            data: {page : Course.config.page, course_id: courseId},
            success: function(result){
                $('#ajax-content-' + courseId).hide();
                $('#ajax-content-' + courseId).empty().append(result);
                $('#ajax-content-' + courseId).show(); 

                // bind events here? call other methods like Couse.methodName()?
            }
        });
    }
}`

我不提供标记，所以让我解释一下逻辑。我初始化类(class)对象，当我单击它时，我有一个链接，我会触发 ajax 请求来获取类(class)并滑动切换类(class)内容。现在我返回加载的html内容。在 html 中我将有按钮和其他项目。我创建一个新方法bindEvents 并在那里绑定(bind)事件？我需要为每个 ajax 调用重新绑定(bind)吗？

Answer 1

您需要将事件监听器添加到 DOM 树中未动态添加的元素中。您可以使用 jQuery 的 live() 将其添加到正文中，但更好的做法是使用 delegate

因此，如果您的 .show-details 链接位于 #main 元素内，则 AJAX 请求不会加载该链接，您将像这样绑定(bind)事件:

$('#main').delegate('.show-details', 'click', this.loadCourse);

编辑:如果您使用的是 jQuery 1.7+，您应该使用:

$('#main').on('click', '.show-details', this.loadCourse);