HTML 요소의 클래스 감지가 올바르게 작동하지 않습니다.

Question

버튼이 있고 클릭하면 HTML 요소에 클래스가 추가되지만 .class를 클릭하면 감지되지 않습니다.

이

은 사용 사례입니다 :

• 클릭 버튼 - "testerclass"HTML 요소에 추가됩니다
• "testerclass은"클릭 - 해당 요소

검출에서 해당 클래스를 제거 왜냐하면 "testerclass"가 클릭되었을 때 클래스가 페이지로드 전에 존재할 때만 작동하는 것 같습니다.로드 후에 수동으로 클래스를 추가 할 때가 아닙니다. 이 문제와 관련이 있습니까?

jsfiddle에서 문제를 재현하려고했지만 jsfiddle에서 편집 할 수 없기 때문에 클래스가 이미 HTML 요소에 추가 된 사용 사례를 다시 만들 수 없습니다.

그러나 here is jsfiddle one이 버튼에서는 buttonone이 클래스를 HTML에 추가하지만 .testerclass 클릭에 대한 감지는 결코 이루어지지 않습니다.

및 here is jsfiddle two. 이 중 하나에서 .testerclass 선택기를 html으로 변경했으며 HTML 클릭 수가 급증하고 있음을 알 수 있습니다 (처음이 문제를 겪었을 때 확실하지 않았습니다).

그리고 오프라인 HTML 요소에 이미 testerclass가있는 세 번째 테스트 사례를 작성했으며이를 통해 전송 된 클릭을 감지했습니다.

$(document).ready(function() { 
    $('button.1').click(function() { 
     $('html').addClass('testerclass'); 
     $('.test').append('"testerclass" added to html<br />'); 
    }); 

    $('.testerclass').click(function() { 
     $('.test').append('testerclass clicked and removed<br />'); 
     $('html').removeClass('testerclass'); 
    }); 
}); 

편집 : 나는 또한 약간 다른 방법으로이 일을 시도 :

$('html').click(function() { 
    if(this).hasClass('testerclass') { 
     //do stuff 
    } 
}); 

을하지만 그 중 하나가 작동하지 않았다.

Answer 1

, 그 기반으로 이벤트를 처리하는 이벤트 위임을 사용해야합니다. 어떤 버튼을 클릭 이벤트가 testerclass 클릭 핸들러를 트리거하는 문서 개체로 전파되기 때문에 또 다른 문제를 일으키는 문서 개체에 이벤트 처리기를 등록해야합니다. 이러한 일이 발생하지 않도록 버튼에서 이벤트 전파를 중지 할 수 있습니다.

$(document).ready(function() { 
    $('button.1').click(function (e) { 
     e.stopPropagation(); 
     $('html').addClass('testerclass'); 
     $('.test').append('"testerclass" added to html<br />'); 
    }); 

    $(document).on('click', '.testerclass', function() { 
     $('.test').append('testerclass clicked and removed<br />'); 
     $('html').removeClass('testerclass'); 
    }); 
}); 

데모 : Fiddle

Answer 2

다른 클릭 핸들러가 인식하지 못하도록 html로 전송을 중지해야합니다.

$('button.1').on("click", function(evt) { 
    $('html').addClass('testerclass'); 
    $('.test').append('"testerclass" added to html<br />'); 
    evt.stopPropagation(); 
}); 

$(document).on("click", function() { 
    $('.test').append('testerclass clicked and removed<br />'); 
    $('html').removeClass('testerclass'); 
}); 

다른 옵션은 하나의 이벤트 핸들러를 추가하고 버튼인지 아닌지 확인하고 콘텐츠를 그런 식으로 변경 이벤트 대상을 사용하는 것입니다.

$(document).on("click", function (evt) {   
    var isButton = $(evt.target).is(".btn"); 
    var message = isButton ? '<p>"testerclass" added to html</p>' : '<p>"testerclass" clicked and removed</p>' 
    $('html').toggleClass('testerclass', isButton); 
    $(".test").append(message); 
}); 

JSFiddle는 다음 testerclass 동적이기 때문에 http://jsfiddle.net/69scv/는

Answer 3

여기 당신이 요소를 HTML로 클래스를 추가 그것은

$('html').on('click', function(e) { 
    var state = !!$(e.target).closest('button.1').length; 
    var msg = state ? 'class added' : 'class removed'; 

    $(this).toggleClass('testerclass', state); 
    $('.test').append(msg + '<br>'); 
}); 

FIDDLE

Answer 4

을 할 수있는 깔끔한 방법이 클래스를 클릭 할 때, 그것은 의미입니다 html 요소는 클릭합니다. 이제 문제는 페이지에서 아무 곳이나 클릭하면 HTML에서이 클래스를 제거합니다. 이 클래스를 body 요소에 대신 추가 해보자.

$(document).ready(function() { 
    $('button.1').click(function() { 
     $('body').addClass('testerclass'); 
     $('.test').append('"testerclass" added to html<br />'); 
    }); 

    $('.testerclass').click(function() { 
     $('.test').append('testerclass clicked and removed<br />'); 
     $('body').removeClass('testerclass'); 
    }); 
}); 

그리고 지금 당신이 그것을 확인하실 수 있습니다 : 그것은 단지 전파를 정지 작동하지 않았다

$('html').click(function() { 
    if(this).hasClass('testerclass') { 
     //do stuff 
    } 
});