0

好的，所以我已经制作了一个功能的静态版本，它工作正常。当用户将鼠标悬停在 div 上时，内容会在图片上滚动到其中。

现在我需要其中的多个，可以通过标签访问。为了节省加载时间，这些选项卡中的内容（静态版本的副本）通过来自另一个 html 文件的 .get 引入。

我的单独 html 文件的结构与正在工作的默认选项卡相同，我将鼠标悬停在页面加载时的一个统计信息上，它可以工作，一旦我更改选项卡，旧内容就会淡出，新内容也会淡出我正确。所有的类名都与结构相同，但是当我将鼠标悬停在这些被引入的元素上时，它们都没有运行。

我是否必须为 .hover 做一些特别的事情才能处理页面加载后通过 .get 动态引入的内容？

4

3 回答 3

1

使用这样的东西：

$("#tabs_content_container").on({
    mouseenter: function (e) {

    },
    mouseleave: function (e) {

    }
}, ".target-class");

您的 HTML 结构类似于：

<div id="tabs_container">
    <ul>
        <li><a href="asdf.html">Tab 1</a></li>
        <li><a href="asdf2.html">Tab 2</a></li>
    </ul>

    <div id="tabs_content_container">

    </div>
</div>

并且您的代码已经在执行以下操作：

$("#tabs_container").on("click", function () {
    $.get($(this).attr("href"), function (data) {
        $("#tabs_content_container").html(data);
    });
});

参考：

于 2013-04-14T16:23:05.130 回答
1

您需要使用事件委托。在此处阅读“直接和委托事件”部分。

于 2013-04-14T16:17:41.137 回答
1

是的，您必须在 get 方法回调后实例化悬停。

于 2013-04-14T16:20:04.083 回答