Find links via AJAX and bind them same action without duplicating definition

Question

I've already saw Event binding on dynamically created elements? before asking this question but I still don't know why I cannot find a elements from AJAX and don't know how to write the code best way without need to duplicate the whole bind content

I've added the following script to my site (I'm using jQuery 1.11.1):

$().ready(function() {

    $('a:not(.flags a)').filter(function() {
        return this.hostname && this.hostname === location.hostname;
    }).addClass('internal_link');


    $(document).on('click', '.internal_link', function(e) {
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            dataType: 'json',
            data: "{}",
            success: function(data) {
                document.title = data.meta_title;

                $('#articlecontent').fadeOut(400, function()
                {
                    $(this).fadeOut('slow').html(data.content).fadeIn('slow');

                });

                // It seems that this filter doesn't work
                $('#articlecontent a').filter(function() {
                    return this.hostname && this.hostname === location.hostname;
                }).addClass('internal_link');

                // should I write here code to made AJAX links to have click method?


                $('nav li a').removeClass('selected');
                $('#nav_'+data.code).addClass('selected');
                $('meta[name=keywords]').attr('keywords', data.meta_keys);
                $('meta[name=description]').attr('description', data.meta_desc);
            }
        });
        e.preventDefault(); // stop the browser from following the link
    });

});

It finds links with the same hostname and add them class internal_link and then for elements with internal_link class it binds onclick action - data are loaded via AJAX.

But the problem appears when data loaded also have links. I would like also for them do the same thing - find links and add them internal_link class (I've already done it but it seems that filter for AJAX content in this case doesn't work) and bind them onclick action but I don't know how to do this. But the problem is that in fact I have to do the same as I already done in my code. Should I have add the whole bind function itself in success again or there is some way to reuse the function one again?

Question: how to achieve this result and is this AJAX secure? I don't have much experience in AJAX and don't know is it safe to load into #articlecontent any data from AJAX request.

score 1 · Answer 1 · answered May 31 '14 at 10:58

1

What you need is jQuery on method.

This way you can write

$('body').on('click', '.internal_link', function(e) { ...

and just forget about it being dynamic.

answered May 31 '14 at 10:58

punund

4,321
3
34
45

Please look at the changed question. on('click' doesn't work for the links I've loaded via AJAX and I don't know should I write some extra bind for them or should they work and there's some other problem – Marcin Nabiałek May 31 '14 at 11:04

Marcin Nabiałek · Accepted Answer · 2014-05-31T15:34:38.337

The solution was more complex.

In fact using

$('.internal_link').bind('click', function(e) {

that I was using at the beginning caused problem because when new link via AJAX are inserted into document, it seems bind doesn't work for them so I used

$(document).on('click', '.internal_link', function(e) {

But the another problem was finding links in content.

Finally working code is:

$().ready(function() {
    $('a:not(.flags a)').filter(function() {
        return this.hostname && this.hostname === location.hostname;
    }).addClass('internal_link');


    $(document).on('click', '.internal_link', function(e) {

        //$('.internal_link').bind('click', function(e) {

        var url = $(this).attr('href');
        $.ajax({
            url: url,
            dataType: 'json',
            data: "{}",
            success: function(data) {
                contentWrapper = $('<div />').html(data.content);

                $(contentWrapper).find('a').filter(function() {
                    return this.hostname && this.hostname === location.hostname;
                }).addClass('internal_link');

                document.title = data.meta_title;

                $('#articlecontent').fadeOut(400, function()
                {
                    $(this).fadeOut('slow').html(contentWrapper.html()).fadeIn('slow');
                });

                $('nav li a').removeClass('selected');
                $('#nav_'+data.code).addClass('selected');
                $('meta[name=keywords]').attr('keywords', data.meta_keys);
                $('meta[name=description]').attr('description', data.meta_desc);
            }
        });
        e.preventDefault();
    });

});

Find links via AJAX and bind them same action without duplicating definition

2 Answers2