jQuery .on이 클래스 변경 후 링크로 작동하지 않습니다.

아래 코드에서 class은 link이 user에서 red으로 변경됩니다. 아이디어는 클래스 빨간색과의 링크가 클릭시 작동해서는 안된다는 것입니다. 그러나 여전히 그렇습니다. 왜 이런 일이 생길까요? live을 사용하려했으나 사용되지 않으므로 on을 사용해야합니다.jQuery .on이 클래스 변경 후 링크로 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Test</title> 

<script type="text/javascript" src="http://localhost/site/scripts/jQuery.js"></script> 

<script type="text/css"> 
.red{ 
color:red; 
} 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".user").on("click",function() { 
    alert('Was Clicked'); 
     var idPri = $(this).data("id"); 
     var idSec = $(this).data("sec"); 
     $('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red'); 
     $('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove(); 
     }); 
     return false; 
    }); 
</script> 
</head> 
<body> 

<div id="container"> 
    <div class="h2" data-id="2">Who is your favorite Math teacher? 
     <div>* User Name <span class="user" data-id="3" data-sec="2">Like</span></div> 
     <div>* User Name <span class="user" data-id="4" data-sec="2">Like</span></div> 
     <div>* User Name <span class="user" data-id="5" data-sec="2">Like</span></div> 
     <div>* User Name <span class="user" data-id="6" data-sec="2">Like</span></div> 
     <div>* User Name <span class="user" data-id="7" data-sec="2">Like</span></div> 
    </div> 
</div> 

</body> 
</html>

출처

2013-10-20 jmenezes

할 수 있습니다 당신이 .user 클래스 자체를 사용하려면 events.But, 당신은 같은 것을 할 수있는 위임 사용해보십시오 :

$(document).ready(function() { 
$(".user").on("click",function() { 
    if($(this).hasClass('red')){ 
     return false; 
    } 
alert('Was Clicked'); 
    var idPri = $(this).data("id"); 
    var idSec = $(this).data("sec"); 

    $('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red'); 
    $('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove(); 
    }); 

    });

확인을 데모 위치 : http://jsfiddle.net/PkBAq/

출처

2013-10-20 11:06:00

직접 이벤트 처리기를 사용하고 있습니다. $(".user").on("click",function() {에 전화하면 이벤트 처리기가 요소에 연결됩니다. 나중에 클래스를 red, 으로 변경하면 이벤트 처리기가 이미에 연결되어 있고 계속 실행됩니다. 귀하의 경우에는, 당신은 위임 된 이벤트 핸들러를 시도 할 수 :

$("#container").on("click",".user",function() {

위임 된 이벤트 핸들러, 다른 한편으로는, 동적으로 평가하기 때문에 이 요소에 직접 부착되지 않은 이벤트 핸들러하지만 컨테이너에 대신.

출처

2013-10-20 10:56:12

'# 컨테이너 '대신'.user'를 사용할 수 있습니까? 나는 그것을 그렇게 필요로한다. ... – jmenezes

나는'live'를 사용해 보았고 내가 게시 한 코드와 잘 동작한다. '생방송'을 사용하는 데 문제가 있습니까? – jmenezes

@jmenezes : 아니요,'# container'는 여러분의'.user' 엘리먼트를 포함하고있는 부모 노드입니다. –

이벤트가 위임 될 수 있도록 컨테이너에 on을 사용해야합니다. 여기

$("#container").on("click",'.user',function() { 
alert('Was Clicked'); 
    var idPri = $(this).data("id"); 
    var idSec = $(this).data("sec"); 
    $('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red'); 
    $('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove(); 
    }); 
    return false; 
});

는 바이올린입니다 http://jsfiddle.net/JPGqq/

출처

2013-10-20 11:04:37

시도해보십시오.

$(".user","#container").on("click",function() {});

출처

2013-10-20 11:18:15 KrishnaDhungana

jQuery .on이 클래스 변경 후 링크로 작동하지 않습니다.

답변

관련 문제