JavaScript/jQuery 事件未触发嵌套 中的元素

Question

我正在构建一个基本的 RSS 阅读器应用程序，单击“故事”时，它的信息将显示在模态视图中。 “故事”或 RSS 提要元素显示在滚动的一行中。

我遇到的问题是，将响应 JS 事件(例如悬停)的元素在嵌套 div 元素的 DOM 链中的某个点停止触发。

更详细:

我的 Rails 应用程序输出类似于这样的标记:

<div class="overscroll">
    <div class="feed-row" data-feedid="<%= feed.id %>"> 
        <div class="feed-item-container">
           <div class="feed-item-overlay">
            <span class="feed-item-title">
               <%= entry.title %>
            </span>
            <br />
            <span class="feed-item-published">
               <%= entry.published.strftime("Posted on %m/%d/%Y") %>
            </span>
            <span class="feed-item-url">
               <%= entry.url %>
            </span>
            <div class="feed-item-content">
               <%= entry.summary %>
            </div>
         </div>

              ... repeats ...
        </div>
    </div>
</div>
<div class="clear">
</div>

现在的问题是——

我已将重要数据存储在 feed-item-container 元素中，我想在一个简单的点击事件中使用 jQuery 提取这些数据。问题是，JS 点击/悬停事件在 feed-row 元素下方停止响应，让我无法访问任何单独的 feed-item-container -

即这有效:

$('.feed-row').hover(... console.log('Works!'););

但这不会:

$('.feed-item-container').hover(... console.log('Does Not Work!');

或者另一种方式:

- overscroll <-- .hover works
    - feed-row <-- .hover works
         - feed-item-container <-- .hover DOES NOT WORK HERE, OR WITH ANY NESTED DIVS

我的样式表(使用 Sass)如下所示:

.overscroll
{
    position: relative;
    width: 98%; 
    height: 200px; 
    overflow: hidden; 
    overflow-x: hidden;
    overflow-y: hidden;
    /*border: solid 1px #000;*/ 
    /*margin: 30px auto;*/
    /*float: left;*/
    /*display: block;*/

    .feed-row
    {
        width: 10000px;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;

        .feed-location
        {
            display: none;
        }

        .feed-item-container
        {
            position: relative;
            height: 200px;
            width:  200px;
            background-color: #000;
            background-image: url('http://lorempixel.com/200/200/');
            background-repeat: no-repeat;
            float: left;
            cursor: move;
            display: block;
            overflow: hidden;

            .feed-item-overlay
            {
                opacity: 1;
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: black;
                width: 200px;
                height: 100px;
                color: white;
                font-weight: normal;
                cursor: pointer;

                .feed-item-title
                {
                    font-size: 125%;
                }

                .feed-item-published
                {               
                }

                .feed-item-url
                {
                    display: none;
                }
                .feed-item-content
                {
                    display: none;
                }

            }

        }

    }

}

最后，来自 Firebug 的原始输出，带有任何 Javascript 转换和诸如此类的东西:

<div class="overscroll" style="position: relative; overflow: hidden; cursor: -moz-grab;">
    <div style="position: absolute; background-color: black; width: 6px; height: 200px; margin: 0px 0pt 0pt 1147px; border-radius: 3px 3px 3px 3px; z-index: 999; opacity: 0;">
    </div>
    <div style="position: absolute; background-color: black; width: 132.954px; height: 6px; margin: 194px 0pt 0pt 0px; border-radius: 3px 3px 3px 3px; z-index: 999; opacity: 0;">
    </div>
    <div data-feedid="5" class="feed-row" style="display: block;">
        <div style="background-image: url(pic.png);" class="feed-item-container">
            <div data-keyboard="true" data-backdrop="false" data-controls-modal="modal-feed-view" class="feed-item-overlay">
                <span class="feed-item-title">
                    <!-- TITLE Clipped -->
                </span>
                <br>
                <span class="feed-item-published">
                    <!-- DATE Clipped -->
                </span>
                <span class="feed-item-url">
                    <!-- URL Clipped -->
                </span>
                <div class="feed-item-content">
                    <!-- CONTENT Clipped -->
                </div>
            </div>
        </div>
        <!-- Repeated RSS Items were here -->
    </div>
</div>

所以，我的问题是:

为什么我不能点击嵌套树中 feed-row 下面的任何内容，我该如何解决这个问题？

非常感谢

编辑#1

当我输入我的伪 jQuery 调用时，我遗漏了上课时间，但它们确实存在于我的实际脚本中，只是我的错字……抱歉

Answer 1

我猜因为这是一个 RSS 提要，所以这个数据是动态加载的？如果是这样，请考虑使用 jQuery 的 on

连接这些事件

$(".overscroll").on("hover", ".feed-item-container", function() {
});

或者，如果您使用的 jQuery 版本 < 1.7，请使用 delegate

$(".overscroll").delegate(".feed-item-container", "hover", function() {
});