$ (document) .on ( "click"… 작동하지 않습니까?

내가 여기서 저지를 수있는 잘 알려진 실수가 있습니까?

요소가 동적으로 생성되고 작동하지 않기 때문에 .on ()을 사용하는 스크립트가 있습니다. 테스트하기 위해 선택기를 동적 ​​요소의 래핑 (정적)으로 대체했지만 여전히 작동하지 않았습니다! 랩핑을 위해 평범한 오래된 .click으로 전환했을 때 작동했습니다.
(이것은 분명히 중요한 동적 요소에 대해서는 작동하지 않습니다.)

이것은 작동합니다 :

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

이것은하지 않습니다 :

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

최신 정보:

Chrome에서 마우스 오른쪽 버튼을 클릭하고 "요소 검사"를 수행하여 무언가를 다시 확인한 다음 클릭 이벤트가 작동했습니다. 나는 새로 고침을했지만 작동하지 않았고 요소를 검사 한 다음 작동했습니다. 이것은 무엇을 의미 하는가?

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>');
});

이 예에서는 "문서에 바인딩"경고 만 발생합니다.

jQuery 1.9.1을 사용한 JSFiddle

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

Jquery :

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

누군가가 이미 지적했듯이 클래스 대신 ID를 사용하고 있습니다. 페이지에 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");
});

여기에 바이올린이 있습니다

이 시도:

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

문서화 방식도 이상합니다. 클래스 선택자에 사용하면 의미가 있지만 ID의 경우에는 쓸모없는 DOM이 거기에서 통과했을 것입니다. id 선택기의 경우 해당 요소를 즉시 가져옵니다.