如何在ajax输出上运行javascript？

Question

我使用jquery-ui选项卡和ajax加载选项卡的内容。下面是我的javascript：

 $(document).ready(function() {
     $("#tabs").tabs({ fx: { opacity: 'toggle' } });
     $('.hd_item').hover(function() {
     //Display the caption
         $(this).find('span.hd_caption').stop(false,true).fadeIn(600);
     },
     function() {
     //Hide the caption
         $(this).find('span.hd_caption').stop(false,true).fadeOut(400);
     });
 });

当用户单击该选项卡时，is将通过ajax加载content.php。ajax的输出是：

 <li class="hd_item">
      <img title="Backyard Brawl" alt="Backyard Brawl" src="games/normal_icons/1844.png" id="hd_icon">
           <span class="hd_caption">
                <h1>Backyard Brawl</h1>
                <p id="hd_description">In this game you pick a player and beat each other up with ...</p>
                <p id="hd_stat">Added: <br>2009-12-14</p><a href="/dirtpilegames/index.php?ground=games&amp;action=play&amp;dig=backyard-brawl">PLAY</a>
           </span>
 </li>

我遇到的问题是javascript不能处理ajax输出。我如何让它在它上面工作呢？

Answer 1

如果我没记错的话，这是因为您正在将hover事件绑定到尚不存在的项上(因为AJAX调用需要一些非零量的时间来执行)。您可能希望尝试使用：

jQuery's live() function

而不是使用.hover()函数进行绑定。

Answer 2

您可以尝试将hover函数放入ajax成功函数中

Answer 3

这是因为在调用hd_items ()函数时没有找到您要添加的ready，所以它们没有悬停事件函数。将该代码片段从ready()中取出，并在加载ajax响应后调用它。