Question

I’m trying to build a basic slider in jQuery. I have 5 primary sections that display on a page, and when you hover over their container div, then arrows pop up on the first and last elements.

My next step is to write code that will store the div (either left or right depending on click side) in an array, and remove it from the DOM. However, I’m having trouble tying into the click event.

Here’s my css:

.left_arrow_background {
 height: 175px;
width: 65px;
/* background:url(../images/left-arrow.png) no-repeat; */
background:#ccc;
opacity: .9;
position: absolute;
cursor: pointer;
z-index: 2;
}

.right_arrow_background {
height: 175px;
width: 65px;
/* background:url(../images/right-arrow.png) no-repeat;*/
background:#ccc;
z-index: 2;
opacity: .9;
position: relative;
left:890px;
cursor: pointer;
}
.boomers_scroller {
height:275px;
padding-left:1px;
display:block;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
    overflow:hidden;
}
.all-boomers {
display: block;
float: left;
height: 225px;
margin-bottom: 20px;
margin-left: 20px;
width: 175px;
}

And the HTML that’s output:

<div class="all-boomers">
<a href="/boomers/profile/id/2"><img src="/images/users/medium_thumbs/4fa44866c3561.jpg" alt=""/></a>
      <p class="boomers_name">PC Guy</p>
      <p class="activity_name">IT Guy PC Repair</p>
    </div>
<!-- three more identical section here -->
<div class="all-boomers">
<a href="/boomers/profile/id/6"><img src="/images/users/medium_thumbs/4fa62dff64c44.jpg" alt=""/></a>
      <p class="boomers_name">Cruella Deville</p>
      <p class="activity_name">Dalmation Dog-Sitter</p>
    </div>

Even when removing z-index from the style sheet, I can’t seem to record a click event. Here’s my js file so far:

$(document).ready(function() {

  var boomers = $('.all-boomers');
  var boomersLength = boomers.length;
  var boomersContainer = {};
  $(".all-boomers:eq(4)").attr('id','right-boomer');
  $(".all-boomers:eq(0)").removeClass("all-boomers").addClass("one-fifth first").attr('id','left-boomer');
  var image_left = '<div class="left_arrow_background"></div>';
  var image_right = '<div class="right_arrow_background"></div>';

  $(".boomers_scroller").hover(  
    function(){
        $(image_left).insertBefore('#left-boomer');
        $(image_right).insertAfter('#right-boomer');
    },
    function(){
        $('.left_arrow_background').remove();
        $('.right_arrow_background').remove();
    });

  $("div.left_arrow_background").click(function(){
    var left_boomer = $('#left-boomer').children();
    // store left_boomer in boomerscontainer, then remove it from dom
    console.log('clicked!');

  });
 });

It’s not just click events… I’ve tried other mouse events as well, and nothing triggers the console test message, or if I put code inside the .click function, it won’t trigger the code.

Edit: added a 4th (relevant css style)

Answer 1

Fixed! The hover event is still occuring when I’m clicking, so nesting the click event inside the hover event clears up the issue.

$(document).ready(function() {
var boomers = $('.all-boomers');
var boomersLength = boomers.length;
var boomersContainer = {};
$(".all-boomers:eq(4)").attr('id','right-boomer');
$(".all-boomers:eq(0)").removeClass("all-boomers").addClass("one-fifth first").attr('id','left-boomer');
var image_left = '<div class="left_arrow_background"></div>';
var image_right = '<div class="right_arrow_background"></div>';
$(".boomers_scroller").hover(       function(){ 
     $(image_left).insertBefore('#left-boomer');
     $(image_right).insertAfter('#right-boomer');
     $("div.left_arrow_background").click(function(){
           var left_boomer = $('#left-boomer').children();
          // store left_boomer in boomerscontainer, then remove it from dom
          console.log('clicked!');    });
 }, 
function(){ 
    $('.left_arrow_background').remove();
     $('.right_arrow_background').remove();
 });
 });