jQuery無応答のクリックイベント

Question

jQueryで基本的なスライダーを作成しようとしています。ページに表示される5つの主要セクションがあり、コンテナdivの上にマウスを置くと、最初と最後の要素に矢印が表示されます。

私の次のステップは、配列にdivを（クリック側に応じて左か右に）保存するコードを記述し、それをDOMから削除することです。しかし、私はクリックイベントに絡んで問題を抱えています。

.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; 
} 

と出力だHTML：：

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

スタイルシートからz-indexを削除しても、私はクリックイベントを記録するように見えることはできません

は、ここに私のCSSです。ここに私のjsファイルは、これまでのところです：

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

    }); 
}); 

それはちょうど、イベントをクリックしていない...私は、他のマウスイベントを試みた、と私は.click関数内のコードを置けば何もコンソールテストメッセージをトリガしない、またはコードをトリガーしません。

編集：あなたは準備ができて（）関数を閉じるために（またはそれをここに貼り付ける前に、それをコピーする:) } 1以上の追加）を忘れてしまった第4回（関連するCSSスタイル）

Answer 1

固定！クリックすると、ホバーイベントがまだ発生しているので、ホバーイベント内でクリックイベントを入れ子にすると、問題が解決されます。

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

を追加しました。このコードの最後まで ここにそれは隔離されています： http://jsfiddle.net/Q3rDz/