jquery addresses and live method

Question

//deep linking 
$.fn.ajaxAnim = function() {
    $(this).animW();
    $(this).html('<div class="load-prog">loading...</div>');
}

$("document").ready(function(){
    contM = $('#main-content');
    contS = $('#second-content');
    $(contM).hide();
    $(contM).addClass('hidden');
    $(contS).hide();
    $(contS).addClass('hidden');
    function loadURL(URL) {
        //console.log("loadURL: " + URL);
        $.ajax({ url: URL, 
                beforeSend: function(){$(contM).ajaxAnim();},
                type: "POST",
                dataType: 'html',
                data: {post_loader: 1},
                success: function(data){
                    $(contM).html(data);
                    $('.post-content').initializeScroll();
                    }
        });
    }

    // Event handlers
    $.address.init(function(event) {
        //console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
    }).change(function(event) {
        evVal = event.value;
        if(evVal == '/'){return false;}
        else{
            $.ajax({ url: $('[rel=address:' + evVal + ']').attr('href'), 
                    beforeSend: function(){$(contM).ajaxAnim();},
                    type: "POST",
                    dataType: 'html',
                    data: {post_loader: 1},
                    success: function(data){
                        $(contM).html(data);
                        $('.post-content').initializeScroll();
            }});
        }
        //console.log("change");
    })

    $('.update-main a, a.update-main').live('click', function(){
        loadURL($(this).attr('href'));
        return false;
    });

  $(".update-second a, a.update-second").live('click', function() {
    var link = $(this);
        $.ajax({ url: link.attr("href"),
                beforeSend: function(){$(contS).ajaxAnim();},
                type: "POST",
                dataType: 'html',
                data: {post_loader: 1},
                success: function(data){
                    $(contS).html(data);
                    $('.post-content').initializeScroll();
        }});
        return false;
  });

});

I'm using jquery addresses to update content while maintaining a useful url. When clicking on links in a main nav, the url is updated properly, but when links are loaded dynamically with ajax, the url address function breaks.

I have made 'click' events live, allowing for content to be loaded via dynamically loaded links, but I can't seem to make the address event listener live, but this seems to be the only way to make this work. Is my syntax wrong if I change this :

$.address.change(function(event) {

to this:

$.address.live('change', function(event) {

or does the live method not work with this plugin?

Answer 1

The live method only works jquery dom elements. Not with plugins.

The live method detects if a dom element was dynamically added to the HTML and binds an event to it. What you're trying to say there is: "If the "address" plugin appears on the html, bind the event "change" to it". Has the "address" plugin isn't a dom element, it doesn't work.

Answer 2

First, the short answer: No, it doesn't work :)

The why part: .live() works off events, it doesn't care if they're custom, etc (in most cases). Hot it works is when you call .live() like this for example:

$(".myThing").live('click', functionToRun);

.live() creates an event handler at the root of the DOM waiting for events to bubble up to it. The important part: new or old elements bubble events the same way, doesn't matter how they were loaded. When the event bubbles up and reaches the DOM root, the .live() event handlers check if their selector matches the element that had the event, and if so they execute.

With a plugin you want to say hey new something and run code on it...as you can see this is very different from how .live() actually works on the inside.

Answer 3

went into the jquery address plugin file and replaced this line:

$.fn.address = function (fn) {
    $(this).click(function() {

with this :

 $.fn.address = function (fn) {
        $(this).live('click',function() {

to make all dynamically loaded links respond to the address plugin event listener