jQuery onclick 문제가 발생했습니다.

예를 들어 설명해 드리겠습니다.jQuery onclick 문제가 발생했습니다.

피드 나 스트림에 '좋아요'버튼 (클래스 : .like)이 있습니다. 사용자가 $ (". like")를 사용하여 클릭하면 jQuery를 사용하여 새로 고침없이 데이터베이스에 삽입 할 수 있습니다.

삽입되면 텍스트를 '달리'로 변경하고 클래스를 '.unlike'로 변경합니다.

그러나 사용자가 다시 클릭하면 $ (". unline"). click 기능으로 이동하는 대신 동일한 기능을 다시 수행합니다. 스크립트 등을 "업데이트"해야합니까? 예를 들어

$(".like").click(function(){ 
     alert("Like!"); 
     $(this).attr("class", "unlike"); 
    }); 
    $(".unlike").click(function(){ 
     alert("Unlike!"); 
     $(this).attr("class", "like"); 
    });

문제는 달리 기능, 그냥 속성이 변경되는 경우에도 같은 기능을 반복 할 것이다 없다는 것입니다.

출처

2012-10-11 imp

난 당신이 일하기 위해 live() 또는 on()을 사용해야합니다 생각이 같은 물건에 깨끗한 내 코드를 유지하기 위해

$(".like").live("click", function() { 
    $(this).removeClass("like").addClass("unlike"); 
}); 
$(".unlike").live("click", function() { 
    $(this).removeClass("unlike").addClass("like"); 
});

출처

2012-10-11 23:45:11 Cyclonecode

jyear 1.7 –

Ditto에서 fyi'live' 만 사용 중지되었습니다. $ ('parent')를 사용하십시오. on ('click', '.childClass', function() {}); –

어, 라이브가 지원되지 않습니다. 그것은 유일한 방법이었습니다 :/ – imp

위의 코드를 할당하면 이벤트 바인딩이 발생합니다.

$(document)on("click",".like",function(){ 
    alert("Like!"); 
    $(this).addClass("unlike"); 
    $(this).removeClass("like"); 
}); 
$(document)on("click",".unlike",function(){ 
    alert("Unike!"); 
    $(this).addClass("like"); 
    $(this).removeClass("unlike"); 
});

출처

2012-10-11 23:44:51

이 코드가 작동하지 않습니까? –

아니, 내 코드를 어긴거야 : o. 콘솔에 아무것도 ...매우 이상한 – imp

-1

unlike 클릭 이벤트 핸들러가 새 항목과 관련되지 않은 : 당신은 이벤트마다 시간을 리 바인드, 또는 더 나은 아직, 이벤트 위임을 사용합니다. 당신이 (jQuery를 on 핸들러)보고 싶을거야 동적으로 같은 클래스를 변경 할 거라면 [http://api.jquery.com/on/]

$(document).on('click',".like", function(){ 
    alert("Like!"); 
    $(this).addClass("unlike").removeClass('like'); 

}); 
$(document).on('click',".unlike",function(){ 
    alert("Unlike!"); 
    $(this).addClass("like").removeClass('unlike'); 
});

출처

2012-10-11 23:45:04

[여기 코드가 작동하지 않는 데모입니다.] (http://jsfiddle.net/mv5C8/). –

DOM 요소에 동적으로 바인딩되지 않습니다. 여기에있는 것은 .click()과 동일합니다. –

한숨, 내가주의를 기울이지 않고 질문에서 복사하여 붙여 넣기 만하면된다. –

시도 이 하나

$(".like").click(function(){ 
    alert("Like!"); 
    $(this).removeClass("like"); 
    $(this).attr("class", "unlike"); 
}); 
$(".unlike").click(function(){ 
    alert("Unlike!"); 
    $(this).removeClass("unlike"); 
    $(this).attr("class", "like"); 
});

출처

2012-10-11 23:45:10 CjCoax

을, 나는 클래스를 지정 결코 채널이 클릭 이벤트를 무시하고 연결합니다. 스타일 클래스는 단순히 CSS가 변경되는 역할을합니다. 예를 들면 다음과 같습니다.

<button class="vote like">button text</button> 

$('.vote').click(function() { 
    var alertText = ($(this).hasClass('like')) ? 'Like!' : 'Unlike!'; 
    alert(alertText); 
    $(this).toggleClass('like').toggleClass('unlike'); 
});

출처

2012-10-11 23:46:48 Vinay

왜냐하면 "다른"attr입니다. 스크립트가로드 될 때 dom에 추가되지 않았습니다. 이

$(document).on('click', '.like', function(){ 
    alert("Like!"); 
    $(this).html('Unlike').removeClass("like").addClass("unlike"); 
}); 

$(document).on('click', '.unlike', function(){ 
    alert("Unlike!"); 
    $(this).html('Like').removeClass("unlike").addClass("like"); 
});

DEMO을 시도

<body> 
<div class="like_it_or_not"> 
    HELLO! 
</div> 
</body>

을 그리고 JS

$("body").on('click','.like_it_or_not', function(){ 
    $(this).toggleClass('like', 'unlike'); 
    if ($(this).hasClass('like')) { 
     alert('like'); 
    } else if ($(this).hasClass('unlike')) { 
     alert('unlike'); 
    } 
});

출처

2012-10-11 23:47:52

이보십시오.

출처

2012-10-11 23:49:11

누가이 질문에 답을 할 수 있습니까? –

주어진 솔루션이 질문을 고려할 때보 다 훨씬 복잡하기 때문에 나는 아래로 내려갔습니다. 또한 DOM에 동일한 classNames를 가진 다른 요소가 포함되어 있으면 예기치 않은 결과가 발생합니다. 그래서 IMHO, 이것이 "작동"한다고해도 이상적인 해결책은 아닙니다. – David

@David, OP는 두 가지 클래스에 대해 두 개의 다른 핸들러가 필요합니다. 그래야, (당신에 따르면) 이것이 복잡한 대답 인 경우, 그런 식으로 주어진 것입니다. 그렇다면 그것이 현재 작동하고 있기 때문에 투표를해야한다는 것을 의미하지는 않습니다. 질문, 아직 답변이 없기 때문에 댓글을 달았을 수도 있습니다. –

당신은 (이상 엔지니어링 IMO입니다) 귀하의 클릭 이벤트를 위임 할 수없는 경우, 핸들러에 체크하십시오

$(".like").click(function(){ 
    alert($(this).hasClass('unlike') ? 'unlike' : 'like'); 
    $(this).toggleClass("unlike like"); 
});

http://jsfiddle.net/NScyM/

는 그것은 '달리 확인해야을 '클래스를 클릭하고 예상대로 클래스를 토글 할 때마다.

출처

2012-10-12 00:01:56 David

최상, 이벤트 위임에 대한 모든 우려를 피하고 단일 처리기를 사용합니다. –

jQuery onclick 문제가 발생했습니다.

답변

관련 문제