Question

I’m having a problem similar to this: JavaScript not working inside AJAX loaded DIV but my problem is that I don’t have any event to bind to. I have this:

$('[title]').colorTip({color:'yellow'});

binding all elements with ‘title’ attribute to that object. It works fine on page reload. But on elements from AJAX call the story is different, it displays like the javascript doesn’t exist. I know to bind elements to other events from AJAX using live(), but how do I bind elements that don’t have ‘events’?

Answer 1

you have to re-bind the tooltip after the ajax call.

$( document ).ajaxStop( function() {
    $('[title]').colorTip({color:'yellow'});
});

Or as suggested by jbabey, you might use the complete callback to re-bind the tooltip (simplified version from here):

$(
function(){
    // Get a reference to the content div (into which we will load content).
    var jContent = $( "#content" );             
    // Hook up link click events to load content.
    $( "a" ).click(
        function( objEvent ){
            var jLink = $( this );
            // Clear status list.
            $( "#ajax-status" ).empty();
            // Launch AJAX request.
            $.ajax(
                {
                    // The link we are accessing.
                    url: jLink.attr( "href" ),
                    // The type of request.
                    type: "get",
                    // The type of data that is getting returned.
                    dataType: "html",
                    complete: function(){
                        console.log("finalized ajax request");
                        //re-bind the tooltip
                        $('[title]').colorTip({color:'yellow'});
                    },
                    success: function( strData ){
                        console.log("ajax success");
                        console.log(strData);
                        // to something with the received data
                        jContent.html( strData );
                    }
                }                           
                );
            // Prevent default click.
            return( false );                    
        }
        );

}
);

Based upon your comment I included the following: You also have to make sure you bind the tooltip on page load:

$( document ).ready( function() {
    $('[title]').colorTip({color:'yellow'});
});