jQuery address won't bind on ajax-loaded content

[siva1117]

Hello, I am using Jquery address along with AJAX SEO (https://github.com/laukstein/ajax-seo)

The problem is the links inside the ajax loaded content is not working. It seems that jQuery address won't bind on ajax-loaded content

I'm trying to achieve a sub navigation style for example lets say in your demo I have clicked on the about link and loaded new content for about page and replaced the content of the '#main_content" div.

The newly loaded content has some links in itself sort of sub links (like sublink1, sublink2, etc) and a new div called "#sub_content".

Now when the sublink1 is clicked i would like to replace the content of "#sub_content" div alone without ever disturbing the '#main_content" div.

I think .address() event is not fired to Ajax loaded content.

Can anyone tell me if it is a bug or am I doing something wrong?

Any help or tips would be great!

--Subramanian

[siva1117]

If it helps,

I was just playing with jquery address JS file and changed the line on 588

this.on('click', function(e) {
to
this.live('click', function(e) {

Now it seems to work, but I'm sure the .live() method has been deprecated since jQuery 1.7 and has been removed in 1.9 and the suggested replacement is .on method

Very strange it works with .live() method and not with .on() method

I'm using jquery-1.9.1 with jquery-migrate-1.1.1

[scythianfuego]

Well, there are two possible solutions for this.
First applicable if this issue #171 is intended behavior
and it is pretty straightforward (should work properly after applying changes from my pull request #174, because current line

if (!this.data('address')) {

don't work properly on multiple elements) :

//somewhere in your code
$(document).ajaxComplete(function() {
  $('a').address(); //simply rebind missing links
});

Second is subject to discussion, cause it should rebind links automatically, but it is not compatible with current data-address check

in short, replace the binding on line 570

this.on('click', function(e) {

with

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

and drop data-address check at all - remove lines 569 and 593

if (!$(this).data('address')) {
.data('address', true);

result should look like this (untested)

$.fn.address = function(fn) {
        $(document).on('click', this.selector, function(e) {
            if (e.shiftKey || e.ctrlKey || e.metaKey || e.which == 2) {
                return true;
            }
            var target = e.currentTarget;
            if ($(target).is('a')) {
                e.preventDefault();
                var value = fn ? fn.call(target) : 
                    /address:/.test($(target).attr('rel')) ? $(target).attr('rel').split('address:')[1].split(' ')[0] : 
                    $.address.state() !== undefined && !/^\/?$/.test($.address.state()) ? 
                            $(target).attr('href').replace(new RegExp('^(.*' + $.address.state() + '|\\.)'), '') : 
                            $(target).attr('href').replace(/^(#\!?|\.)/, '');
                $.address.value(value);
            }
        }).on('submit', function(e) {
            var target = e.currentTarget;
            if ($(target).is('form')) {
                e.preventDefault();
                var action = $(target).attr('action'),
                    value = fn ? fn.call(target) : (action.indexOf('?') != -1 ? action.replace(/&$/, '') : action + '?') + 
                        $(target).serialize();
                $.address.value(value);
            }
        });
    }
    return this;
};