使用 jquery 将事件绑定到 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()?
            }
        });
    }
}`

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

Answer 1

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

因此，例如，如果您的 .show-details 链接位于 #main 元素内，那么 AJAX 请求不会加载该链接，您可以像这样绑定事件：

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

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

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