binding events to ajax loaded content with jquery

Question

I have some tabs that are loaded with ajax. I get the content via HTML and insert it into the page. The tricky part is when I load the new content with ajax I will need to listen for other events for the new content and perform other tasks on the new content. Here is my object:

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()?
            }
        });
    }
}`

I am not providing markup so let me explain the logic. I init the course object and I have a link when I click it i fire an ajax request to get the course and slideToggle the course content. Now I return the html content loaded. In the html I will have buttons and other items. I make a new method bindEvents and bind the events there? Do I need to rebind for every ajax call?

This is a duplicate: http://stackoverflow.com/q/16598213/386579 — shasi kanth, Mar 23 '15 at 12:53
check this out : http://stackoverflow.com/questions/13791740/jquery-lazyload-with-ajax/31234389#31234389 — antoniputra, Jul 05 '15 at 19:59

Tjkoopa · Answer 1 · 2012-03-07T16:39:27.780

3

You need to add the event listener to an element further up the DOM tree that is not added dynamically. You can use jQuery's live() to add it to the body, but it's better practice to use delegate

So if your .show-details link is inside a #main element for example, that doesn't get loaded by the AJAX request you would bind the event like so:

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

Edit: If you are using jQuery 1.7+ you should use:

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

edited Mar 07 '12 at 16:39

answered Mar 07 '12 at 12:34

Tjkoopa

2,298
1
17
20

delegate is a just a reference to on event – Mythriel Mar 07 '12 at 15:07
In jQuery 1.7+ yeh. I must have misunderstood your question. The way you have described it, I thought you wanted to bind events to elements that may not exist in the DOM at the time, but will be added at a later point. Please make it clearer what you are after. – Tjkoopa Mar 07 '12 at 15:31
I want to bind events to elements that are not in the DOM and loaded after AJAX request – Mythriel Mar 07 '12 at 16:23
Well that is what I've explained above, if you are using jQuery 1.7+ you would use $('#main').on('click', '.show-details', this.loadCourse); instead. After doing this all future elements matching the selector will pick up the events (this relies on a static element like #main not being part of the DOM changes) – Tjkoopa Mar 07 '12 at 16:37

binding events to ajax loaded content with jquery

1 Answers1