Question

Not really much of a JS man – so can anyone explain why this isn’t working? I want to call a predefined function in one script from my simple AJAX script – I just want it to call the qtip functionality upon the contents of the div brought into the page via AJAX.

Thanks,
H

SCript 1 – AJAX loader

       if(myHttpRequest.readyState==4)
            data.innerHTML = myHttpRequest.responseText;
                qtip_me('.div_to_act_on');
  }

Script 2 – main JQuery script

$(document).ready(function() {

    function qtip_me(a) {
        $(a).each(function() {
           $(this).qtip({ 
               content: {'showme'},
                position: {corner: {tooltip: 'bottomLeft', target: 'topRight'}},
                style: { 
                      width: 300,
                      padding: 5,
                      background: '#A2D959',
                      color: 'black',
                      textAlign: 'center',
                      border: {
                         width: 7,
                         radius: 5,
                         color: '#A2D959'
                      },
                      tip: 'bottomLeft',
                      name: 'dark' // Inherit the rest of the attributes from the preset dark style
                }           
            }); 
        });
    };
});

Answer 1

It might be that the function defined like that is not in scope.
Try defining the function like so:

qtip_me = function(a) {}

This way it will be in scope.

Or as the other answers say, don’t define the function inside the document ready.