클래스 업데이트 후 jQuery 클릭 함수가 작동하지 않습니다.

jQuery를 사용하여 요소의 클래스를 변경하면 클릭 기능이 새 클래스에서 작동하지 않습니다. 토글 버튼을 http://jsfiddle.net/NkG9k/1/클래스 업데이트 후 jQuery 클릭 함수가 작동하지 않습니다.

에 한번의 클릭을 다시 -

다음은 여기를 시도 할 수 있습니다 내 코드

jQuery('.close').on('click', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery('.open').on('click', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});

입니다. (div가 미끄러지지 않습니다)

출처

2012-08-07 rzr

나는 그것을 논평으로 게시 한 이유는 엄밀히 말하면 가장 효율적인 방법은 아닙니다. 그것은 효과가 있지만 다른 사람들이 더 나은 해결책을 찾을 것이라고 확신합니다. 아마도 @Prog Mania와 함께 가고 ID에주는 것과 같은 요소에 또 다른 선택기를 지정할 것입니다. – DaveHogan

jQuery live()는 가치가 떨어지고 사용되어서는 안됩니다. – Logard

문서에서 on을 적용하고 클래스 필터를 사용하여 버튼에 이벤트를 첨부하십시오.

jQuery(document).on('click','.close', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery(document).on('click','.open', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});

Live Demo 당신은 클래스가의 (open에서 close과 close에서 open로) 변경 될 때 있도록이 역동적 인 동작을 할 요소의 정적 부모에 이벤트를 위임 할 필요가 요소는 이벤트가 새로 변경된 클래스에 따라이 요소에 자동으로 바인딩됩니다.

Understanding Event Delegation

그 후손들이 현재 존재하거나 에 추가할지 여부를
이벤트 대표단은 선택 일치하는 모든 자손 발생하는 부모 요소에 하나의 이벤트 리스너를 부착 할 수있게 해준다 미래.

출처

2012-08-07 13:53:19 Adil

이벤트를 트리거하는 클래스를 제거했습니다. id를주고 클래스 대신 id로 호출 할 수 있습니다. 당신이 경우

$('.close').bind('click', function() { 
$('div').toggle(); 
});

: 요소가 이런 식으로 뭔가를 시도

jQuery('.close').live('click', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery('.open').live('click', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});

출처

2012-08-07 13:54:07

-1

대신 라이브 이벤트와 클릭의 라이브 이벤트를 사용해야 작동 이 체크 아웃 할 수있는 애니메이션이 필요합니다. link

출처

2012-08-07 13:57:15

jQuery live()는 가치가 떨어지며 절대로 사용해서는 안됩니다. – Logard

@logard live()가 현재 사용되지 않는 이유는 무엇입니까? –

"jQuery 1.7부터는 .live() 메서드가 더 이상 사용되지 않으며, .on()을 사용하여 이벤트 처리기를 연결하십시오. 이전 버전의 jQuery 사용자는 .live()보다 .delegate()를 우선 사용해야합니다." [jQuery API] (http://api.jquery.com/live/) – Logard

을 만들 때

check this

jQuery('#close').toggle(function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
},function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
}); 
<div id="close" class="close">toggle</div>

출처

2012-08-07 13:57:17 Logard

아래 코드를 사용하려면.

<button class="toggle">toggle</button> 
<div>THIS IS TEXT</div> 


jQuery('.toggle').toggle( 
    function() { 
     jQuery('div').slideUp(); 
    }, 
    function() { 
     jQuery('div').slideDown(); 
    } 
);

출처

2012-08-07 13:57:44

클래스 업데이트 후 jQuery 클릭 함수가 작동하지 않습니다.

답변

관련 문제