jQuery 무응답 클릭 이벤트

Question

jQuery에서 기본 슬라이더를 작성하려고합니다. 페이지에 표시되는 기본 섹션이 5 개 있으며 컨테이너 div 위로 마우스를 가져 가면 첫 번째 요소와 마지막 요소에 화살표가 나타납니다.

내 다음 단계는 배열에 div (클릭 옆에 따라 왼쪽 또는 오른쪽)를 저장하는 코드를 작성하여 DOM에서 제거하는 것입니다. 그러나 click 이벤트에 연결하는 데 문제가 있습니다.

.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입니다. 그냥 이벤트를 클릭 아니에요

$(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 함수 안에 코드를 삽입하면 아무것도 콘솔 테스트 메시지를 트리거하지 않거나 : 여기 내 JS 파일은 지금까지의 코드를 트리거하지 않습니다.

편집 : 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/