I am currently developing a simple RSS reader application where, upon clicking a 'story', the relevant information is displayed in a modal view. The 'stories' or RSS feed items are presented in a scrolling row.
However, I have encountered an issue with JS events not triggering for certain elements within nested div chains at a specific point in the DOM structure.
To provide more context:
The HTML markup generated by my Rails app follows this pattern:
<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>
The main issue I am facing is this -
I need to extract important data from the feed-item-container element using jQuery on a click event. However, JS events such as click and hover do not work below the feed-row element, making it impossible to interact with individual feed-item-containers.
For example, hovering over '.feed-row' triggers the event but attempting the same action on '.feed-item-container' does not.
Another visualization of the hierarchy:
- overscroll <-- .hover works
- feed-row <-- .hover works
- feed-item-container <-- .hover DOES NOT WORK HERE, OR WITH ANY NESTED DIVS
The Sass stylesheet used in conjunction with the HTML looks like this:
.overscroll
{
position: relative;
width: 98%;
height: 200px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
.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;
}
}
}
}
}
In summary, the core problem lies in the inability to trigger JS events below the feed-row level in the DOM structure. Any advice on how to address this issue would be greatly appreciated.
Thank you
Edit #1
During the creation of my pseudo jQuery calls, I inadvertently omitted the class periods. However, please note that they are present in my actual script; it was simply a typing error on my part. Apologies for any confusion caused.