DIV 태그 좌표 가져 오기

Question

코드 입력 here이 코드를 보면 div 태그의 왼쪽 좌표가 표시됩니다. http://jsfiddle.net/JuPA4/3/이 필요합니다.

$(function() { 
    var position = $("#red11").offset(); 
    $("#amount").val(position.left); 
}); 

는 (나는 마약 중독 포럼에 질문하고 지금 3 일간 아무 대답이 없었습니다)

Console error is (Uncaught TypeError: Cannot read property 'left' of undefined) not sure why as I can interact with the element!

블랙 도트 요소는 위의 코드를 게시 어떤 이유로 #black라는 div 태그 내에을 파일 hype에서 작동하지 않습니다. 나는 그것과 상호 작용할 수 있고 페이지에 데모를 추가하여 숨기기/표시를 클릭하여 점과 상호 작용할 수 있음을 알고 있습니다.

저는 Javascript로는 최고가 아니므로 아무도 아이디어가 없다면 도움을 받으실 수 있습니다.

결과적으로 left와 top의 좌표가 텍스트 입력으로 업데이트되어 데이터베이스에 배치 할 수 있습니다.

Answer 1

어떤 요소와도 일치하지 않는 셀렉터에서 .offset()을 호출하면 undefined을 반환하며 선택기가 DOM에 "black"요소가 추가되기 전에 실행되는 것처럼 보입니다. 요소가 DOM에 추가 될 때까지 코드를 지연해야합니다.

해결 방법은 this question입니다. 그것은 DOM을 보는 방법을 보여줍니다.

아니면 그냥 요소까지 다시 시도 대기 및 시도 다음과 같은 무언가를 시도 할 수있다 : 심지어 (윈도우의로드 이벤트까지 코드를 지연하기에 충분 수도

<script> 
function executeWhenExists(selector, wait, callback) { 
    if ($(selector).length > 0) { 
     callback(); 
    } else { 
     setTimeout(function() { executeWhenExists(selector, wait, callback) }, wait); 
    } 
} 

$(function() { 
    executeWhenExists("#black", 1000, function() { 
     var position = $("#black").offset(); 
     $("#amount").val(position.left); 
    }); 
}); 
</script> 

문서의 준비 이벤트에서 실행되도록하는 것이 아니라). 그러면 다음과 같이 보입니다.

<script> 
$(window).on('load', function() { 
    var position = $("#black").offset(); 
    $("#amount").val(position.left); 
}); 
</script>