'클릭'기능이 목록과 함께 작동하지 않습니다.

Question

제목이 "Please city your city"이고 숨겨진 도시 목록이 숨겨진 HTML 목록이 있습니다. 목록을 클릭하면 목록이 표시되고 하나를 클릭하면 모두 사라지고 도시 만 볼 수 있습니다. 도시를 다시 클릭하려고하면 다시 열지 않는 다른 도시를 선택할 수 있습니다. 그것이 작동하지 않는 이유

$=jQuery 
$('.heading').click(function() { 
    $('.city').show(); 
}); 

$('.city').click(function() { 
    $(this).show(); 
    $('.heading').hide(); 
    $('.city').removeClass('cityhover'); 
    $(this).removeClass('city'); 
    $(this).addClass('cityhover'); 
    $('.city').hide(); 
}); 

$('.cityhover').click(function() { 
    $('.heading').show(); 
    $('.city').show(); 
    $('.cityhover').removeClass('cityhover'); 
}); 

Answer 1

는 여기에 있습니다. 내 의견을 따르십시오. 그들이 실행 한 후

$('.citychooser').on('click', '.city', function() .... 

http://jsfiddle.net/seancannon/rVq2T/

Answer 2

JQuery와 선택기를 재평가하지 않습니다

$('.heading').click(function() { 
    $('.city').show(); // ok we show all the cities 
}); 


$('.city').click(function() { // clicked on a city 
    $(this).show(); 
    $('.heading').hide(); // hide the heading 
    $('.city').removeClass('cityhover'); // HERE you remove the cityhover class 
    $(this).removeClass('city'); 
    $(this).addClass('cityhover'); 
    $('.city').hide(); 
}); 

$('.cityhover').click(function() { // but the only way to show the heading again is if you click one 
    $('.heading').show(); 
    $('.city').show(); 
    $('.cityhover').removeClass('cityhover'); 
}); 

트릭은 이벤트 위임을 사용하는 것입니다.
비트는 현재 .cityhover 요소가 있고 클릭 처리기를 첨부 한 모든 요소를 ​​선택하지만 className 자체를 특수하게 만듭니다. 나중에 cityhover 클래스를 추가해도 요소가 클릭 핸들러를 가져 오지 않습니다.

나의 제안은 요소의 현재 클래스 명을 기준으로 .city 및 .cityhover 클래스와 지점의 클릭 핸들러를 결합하는 것입니다을 클릭 :

$('.city').click(function() { 
    if ($(this).hasClass('city')) { 
     $(this).show(); 
     $('.heading').hide(); 
     $('.city').removeClass('cityhover'); 
     $(this).removeClass('city'); 
     $(this).addClass('cityhover'); 
     $('.city').hide(); 
    } else { 
     $('.heading').show(); 
     $('.city').show(); 
     $('.cityhover').addClass('city').removeClass('cityhover'); 
    } 
}); 

jsFiddle

Answer 3

이 이벤트의 문제입니다 대표단. 이벤트를 요소에 바인딩 한 다음 클래스를 변경하고 이벤트가 업데이트 될 것으로 예상했습니다. 이 경우 이벤트 위임을 사용해야합니다

http://jsfiddle.net/u9wS3/

$(document).on('click', '.city', function() { 
    $(this).show(); 
    $('.heading').hide(); 
    $('.city').removeClass('cityhover'); 
    $(this).removeClass('city'); 
    $(this).addClass('cityhover'); 
    $('.city').hide(); 
}); 

$(document).on('click','.cityhover', function() { 
    $('.heading').show(); 
    $(this).addClass('city'); // also added this line 
    $('.city').show(); 
    $('.cityhover').removeClass('cityhover'); 
}); 

Answer 4

나는 그것의 대부분은, 내가 상태를 설정하는 것을 선호하고 CSS가 보여주는를 처리시키는 때마다 적절한 숨어 다시 썼다. 위에서 언급했듯이 이벤트 핸들러를 DOM 객체에 바인딩하면 더 이상 클래스를 추가하거나 제거하더라도 문제가 발생하지 않으므로 대부분의 문제가 발생합니다. 변경

자바 스크립트 HTML :

Anycase, 여기에 코드입니다

$ = jQuery; 
$('.citychooser').on('click', '.heading', null, 

function() { 
    $(this).parent().addClass('choosing'); 
}); 

$('.citychooser').on('click', '.city', null, 

function() { 
    if($(this).closest('.citychooser').hasClass('choosing')) 
    { 
     $(this).addClass('active'); 
     $(this).parent().removeClass('choosing').addClass('chosen'); 
    } else { 
     $(this).removeClass('active'); 
     $(this).parent().addClass('choosing').removeClass('chosen'); 
    } 
}); 

CSS :

.citychooser.chosen .heading{ 
    display:none; 
} 
.citychooser.chosen .city{ 
    display:none; 
} 
.citychooser.chosen .city.active{ 
    display:block; 
} 
.citychooser .city { 
    display:none; 
} 
.citychooser.choosing .city { 
    display:block; 
} 
.citychooser.choosing .header{ 
display:block; 
} 
.city:hover { 
    background-color: #808080; 
} 
.cityhover { 
    background-color: #808080!important; 
} 
.citychooser { 
    width: 555px; 
    float: right; 
    list-style-type: none; 
    margin-top: 0px; 
} 
.citychooser li { 
    background-color: #cccccc; 
    margin-bottom: 5px; 
    height: 50px; 
    line-height: 50px; 
} 
.citychooser .heading { 
    text-indent: 20px; 
} 

jsfiddle : http://jsfiddle.net/aLj3V/7/

오히려 배경이 어두운 유지한다면 때까지 rechoosing 그것에 대해

$ = jQuery; 
$('.citychooser').on('click', '.heading', null, 

function() { 
    $(this).parent().addClass('choosing'); 
}); 

$('.citychooser').on('click', '.city', null, 

function() { 
    if($(this).closest('.citychooser').hasClass('choosing')) 
    { 
     $(this).parent().find('.active').removeClass('active'); 
     $(this).addClass('active'); 
     $(this).parent().removeClass('choosing').addClass('chosen'); 
    } else { 
     $(this).parent().addClass('choosing').removeClass('chosen'); 
    } 
}); 

jsfiddle : http://jsfiddle.net/aLj3V/8/