JavaScript/jQuery 事件未在嵌套 <divs> 中的元素上触发

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-containers -

即这行得通：

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

或者，如果您使用的是 delegate

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

Answer 2

好像你错过了“。”指示“类”选择器。你的意思是：

$('.feed-row')

和

$('.feed-item-container')