jQuery événement de clic non-réactif

Question

J'essaye de construire un curseur de base dans jQuery. J'ai 5 sections primaires qui s'affichent sur une page, et lorsque vous survolez leur conteneur div, des flèches apparaissent sur le premier et le dernier élément.

L'étape suivante consiste à écrire du code qui stockera la div (gauche ou droite selon le côté du clic) dans un tableau, et le retirer du DOM. Cependant, j'ai de la difficulté à m'attacher à l'événement click.

Voici mon 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; 
} 

Et le code HTML qui est sortie:

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

Même lors du retrait z-index de la feuille de style, je ne peux pas sembler enregistrer un événement de clic. Voici mon fichier js jusqu'à présent:

$(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!'); 

    }); 
}); 

Il ne suffit pas cliquer sur des événements ... J'ai essayé d'autres événements de souris aussi bien, et rien ne déclenche le message de test de la console, ou si je mets code dans la fonction .cliquez , il ne déclenchera pas le code.

Edit: ajouté un 4ème (style css pertinent)

Answer 1

Fixé! L'événement hover se produit toujours lorsque je clique. L'imbrication de l'événement click dans l'événement hover permet donc de résoudre le problème.

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

Answer 2

Vous avez oublié de fermer la fonction prêt() (ou de le copier avant de le coller ici :) Ajouter un autre}); au bas de ce code. Ici, il est isolé: http://jsfiddle.net/Q3rDz/