$cluetip 未定义：为什么？

Question

When I postload cluetip (ie grab it with ajax and then append a script tag to body), I get the following javascript error: $cluetip is undefined. However, everything still works. Any idea why?

The postload script is well-tested and does not break anything else. I have confirmed that the scripts are loading in the correct order.

Answer 1

I had a similar problem and here is how I finally resolved it (ie, no more $cluetip undefined error msg).

First, here is my scenario which may be similar to yours. On the page, I have a

<div id="sel_area"></div>

It is empty and the idea is to employ jquery/ajax to dynamically generate the desired <select><option>...</option>...</select> HTML code to insert into the #sel_area above like so

$('#sel_area').html(data);

where data is the generated HTML select tag.

However, I think my problem is because I was not retuning the dynamically generated data result in JSON or in XML format and then processing it accordingly. Instead, I was lazily returning the result as-is as ordinary text/html. When I kept getting the $cluetip is undefined error no matter what I tried, I decided to use alert(data) to see was was being returned. Alas, there I saw with my own eyes that data was not just only what I had echoed but it had the entire html page appended to it. The solution was then clear to me, Without giving in to returning data in XML or JSON protocol: I made the following minor changes to solve the problem:

The change at the remote script that generates the <select> tag. The last last was

echo "$select_tag";

I changed this to

echo "$select_tag~";

That is, I appended a trailing ~ (tilde) to serve as a separator between my select_tag string output and the HTML page that I now knew would be appended whether I liked it or not.

The change in the jQuery/AJAX method.

I replaced the line

$('#sel_area').html(data);

with the following lines:

data_list = data.split('~');
$('#sel_area').html(data_list[0]);

There you have it. That does the trick. The split method enabled me to detach my desired select_tag from data easily because I had wisely inserted ~ (tilde) to serve as my field separator which I knew was neither part of the select_tag result nor the HTML page to be appended by the system. Hope this helps.

Answer 2

Dynamically-loaded scripts are not available immediately. You have to wait for the script to completely load, which is a problem more complicated than one might imagine.

Answer 3

I don't know cluetip, and it may be a typo, but $cluetip won't be defined, $.cluetip (note the " . ") should be.

A quick look at the docs seems to make me think that cluetip is a function that must be called on some element ie $('#somediv').cluetip(...) . If you want global defaults you have $.cluetip.setup(...) , but either way, it won't define $cluetip , just $.cluetip .