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请求来获取课程和slideToggle课程内容。现在我返回加载的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);

使用jquery将事件绑定到ajax加载的内容

1 个答案: