$(document.(" 클릭"에서...안되나요?

$(document.(" 클릭"에서...안되나요?

제가 여기서 저지를 수 있는 잘 알려진 실수가 있나요?

요소가 동적으로 생성되어 작동하지 않기 때문에 .on()을 사용하는 스크립트가 있습니다.테스트를 해보려고 셀렉터를 정적인 동적 요소 랩으로 교체했는데도 작동이 안 됐어요!내가 플레인 올드로 전환했을 때 랩을 클릭하면 작동했습니다.
(이것은 중요한 동적 요소에는 분명 효과가 없을 것입니다.)

작동 내용:

$("#test-element").click(function() {
    alert("click");
});

이것은 다음과 같습니다.

$(document).on("click","#test-element",function() {
    alert("click");
});

업데이트:

Chrome에서 "Inspect Element"를 마우스 오른쪽 버튼으로 클릭하고 다시 확인해보니 클릭 이벤트가 작동했습니다.새로고침을 했는데 작동이 안 되고 요소를 검사한 다음 작동했습니다.이것은 무엇을 의미합니까?

ID="test- element"인 요소에 대한 클릭 이벤트를 수신하기 위해 문서에 바인딩하는 올바른 구문을 사용하고 있습니다.

다음 중 하나로 인해 작동하지 않을 수 있습니다.

• 최신 버전의 jQuery를 사용하지 않음
• 코드를 DOM 내부에 포장하지 않음
• 또는 이벤트가 문서의 청취자에게 거품을 일으키지 않도록 하는 작업을 수행하고 있습니다.

이벤트 수신기를 선언한 후 작성된 요소에서 이벤트를 캡처하려면 상위 요소 또는 계층 구조의 상위 요소에 바인딩해야 합니다.

예를 들어,

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

이 예에서는 "bound to document" 경보만 발생합니다.

jQuery 1.9.1로 JSFiddle

당신의 코드는 작동하겠지만, 답이 당신에게 도움이 되지 않는다는 것을 알고 있습니다.여기(jsfiddle)에서 작동 예를 볼 수 있습니다.

쿼리:

$(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

이미 지적하신 것처럼, 수업 대신 아이디를 사용하고 계십니다.ID가 있는 페이지에 두 개 이상의 요소가 있는 경우, jquery는 해당 ID의 첫 번째 요소만 반환합니다.그렇게 작동하기 때문에 오류는 없을 것입니다.이것이 문제라면 클릭 이벤트가 처음에 작동하는 것을 알 수 있습니다.test-element하지만 그 어떤 것에도 해당되지 않습니다.

문제의 증상을 정확하게 설명하지 못하면 선택기가 잘못되었을 수 있습니다.업데이트를 통해 요소를 검사한 후 페이지를 다시 클릭하고 클릭을 트리거하기 때문에 이러한 경우가 있다고 생각하게 되었습니다.이것을 야기할 수 있는 것은 만약 당신이 이벤트 청취자를 실제의document대신에test-element. 그런 경우, 문서를 클릭한 후 다시 켜는 경우(예: 개발자 창에서 문서로 다시) 이벤트가 트리거됩니다.이 경우 두 개의 다른 탭 사이를 클릭하면 클릭 이벤트가 트리거됩니다(두 개의 탭이 서로 다르기 때문에).document따라서 문서를 클릭하는 것입니다.

이 두 가지 중 어느 것도 답이 되지 않는다면 HTML을 게시하는 것은 그것을 파악하는 데 큰 도움이 될 것입니다.

오래된 게시물이지만, 같은 사례가 있어서 공유하는 것을 좋아하지만 마침내 문제를 알았습니다.

문제는 : 지정된 HTML 요소로 작업할 함수를 만들었지만, 이 함수와 관련된 HTML 요소는 아직 생성되지 않았습니다(요소가 동적으로 생성되었기 때문입니다).우리는 그것을 작동시키기 위해 요소를 만드는 동시에 기능을 기능으로 만들어야 합니다.관련 기능을 만드는 것보다 요소가 먼저입니다.

간단히 말해서, 함수는 그 이전에 생성된 요소(그)에만 작동할 것입니다.동적으로 생성된 모든 요소는 그의 이름을 따온 것입니다.

그러나 위의 경우에 주의를 기울이지 않은 이 샘플을 검사해 주시기 바랍니다.

<div class="btn-list" id="selected-country"></div>

동적으로 추가됨:

<button class="btn-map" data-country="'+country+'">'+ country+' </button>

이 기능은 버튼을 클릭하면 잘 작동합니다.

$(document).ready(function() {    
        $('#selected-country').on('click','.btn-map', function(){ 
        var datacountry = $(this).data('country'); console.log(datacountry);
    });
})

또는 다음과 같은 바디를 사용할 수 있습니다.

$('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

작동하지 않는 것과 비교:

$(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

도움이 되기를 바랍니다

작동 내용:

<div id="start-element">Click Me</div>

$(document).on("click","#test-element",function() {
    alert("click");
});

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

여기 피들이 있습니다.

만약 이 코드가 문서 준비 하에서도 작동하지 않는다면, 아마도 당신은 a를 할당했을 것입니다.return false;당신의 js 파일의 어딘가에서 그 버튼에 버튼이 있다면, 그것을 a,span, 닻 또는 div로 바꾸고 그것이 작동하는지 테스트해보세요.

$(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
});

시도해 보기:

$("#test-element").on("click" ,function() {
    alert("click");
});

문서 방식도 이상합니다.클래스 선택기에 사용된다면 저는 이해가 되지만 ID의 경우에는 그곳을 횡단하는 쓸모없는 DOM이 있을 것입니다.ID 셀렉터의 경우 해당 요소를 즉시 얻을 수 있습니다.

$(document).on('click', '#test-element', () => { $('any class/id').hide(); });

*숨는 것 대신 원하는 것을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/17605296/document-onclick-not-working