やりたかったことは、ajax処理で、引っ張ってきたhtmlに対しても、このjQuery tools tooltipを適応させたいというだけ。
。。。たったこれだけのことなんですが、ハマったw
というわけで、簡単に解決策だけ。。
【ベースとなるhtml】
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('対象のセレクタ名').tooltip(); }); <style> /* tooltip styling. by default the element to be styled is .tooltip */ #tooltips { display:none; background:transparent url(/images/white_arrow.png); font-size:5px; height:70px; width:160px; padding:25px; color:#333; } </style>↑これ、(当たり前ですが)、$(document).ready()使ってるんで、そのページの読み込み時のみ有効ですよね。
なんで、試しにajax通信成功時に読み込むページで上記のスクリプト部分全部突っ込んでも音沙汰なし。
したらば、と、
$().live('mouseover', function(){ $().tooltip(); });としたり、$.getScriptで呼び出してもだめ。。。
(まぁこれまた至極当然、ちゃんと考えればわかるのに、思いつかなかったんだけども、)
解決策としては、
対象となるセレクタのajax成功時にこいつを動かすようにしてあげればokでした。。。
(.ajaxCompleteで呼び出してあげればよかった)
$.ajax({ type: 'GET', url: url, dataType: 'html', success: function(data) { $().ready(function(){ $.getScript("/js/jquery.tools.min.js"); $('対象としたいセレクタ名').ajaxComplete(function(){ $(this).tooltip(); }); }); }, });
なんて簡単なお話で、気づかなかったんだ。。。
これで数時間悩んだので、もし他にも同じようなことで悩んでいる人がいたり、未来の自分のためのメモということで。。。