Question

我正在使用jquery-ui tabs和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);
     });
 });

当用户点击选项卡时，将通过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

如果我没弄错的话，那是因为你将悬停事件绑定到尚不存在的项目（因为AJAX调用需要一些非零的时间来执行）。您可能想尝试使用：

jQuery's live() function

而不是.hover（）函数来进行绑定。

Answer 2

你可以尝试将悬停功能放在你的ajax成功函数中

Answer 3

这是因为调用ready（）函数时找不到你添加的hd_items，因此它们没有悬停事件函数。将该片段从ready（）中取出并在加载ajax响应后调用它。

Answer 4

例如，当您要求jQuery在页面上找到类.hd_item的所有元素时，您只需要询问有关当前文档元素的jQuery。如果你向文档中添加更多元素，jQuery就没有重新运行过去的命令。当然，解决方案是告诉jQuery重新运行那些过去的命令。

$(document).ready(function() {
     $("#tabs").tabs({ fx: { opacity: 'toggle' } });
     registerTabContent();
});

// This function mocks whatever loads your Ajax content
function loadSomeAjaxyStuff() {
    loadMyTab();
    // After we load the content, we rerun the code to pick up the new
    // (well, it gets the old ones as well) elements we've added.
    registerTabContent();
}

function registerTabContent() {
    $('.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);
     });
}

如何在ajax输出上运行javascript？

4 个答案: