이 jQuery 클릭 기능이 작동하지 않는 이유는 무엇입니까?

116

암호:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

위의 코드는 작동하지 않습니다. #clicker를 클릭하면 경고가 표시되지 않고 숨겨지지 않습니다. 콘솔을 확인했는데 오류가 없습니다. 또한 JQuery가로드되고 있는지 실제로 확인했습니다. 그래서 문제가 무엇인지 확실하지 않습니다. 나는 또한 경고와 함께 문서 준비 기능을 수행했으며 작동하여 내가 뭘 잘못하고 있는지 확신하지 못했습니다. 도와주세요. 감사!

— Starbucks
소스

3

document.ready에 코드를 래핑합니다

— karthikr 2013-09-03

1

오류, 구문 또는 파일을 찾을 수 없거나 다른 것이 있으면 브라우저의 콘솔을 확인 했습니까?

— Siddharth Pandey 2013 년

1

의 가능한 중복 왜 이러한 요소를 찾을에서 getElementById으로 jQuery를 또는 DOM 방법을합니까?

— user4642212

180

$(document).ready(function() {});블록에 자바 스크립트 코드를 추가해야합니다 .

즉

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

으로 jQuery를 문서의 상태 : 준비 "페이지는 문서가 될 때까지 안전하게 조작 할 수 없습니다" "jQuery를 당신을 위해 준비의 상태를 감지 코드 내부에 포함되어 있습니다.. $( document ).ready()만 페이지의 문서 객체 모델 (DOM) 한 번 실행되는 자바 스크립트에 대한 준비가되어 실행할 코드 "

— 뫼비우스
소스

7

내가 얼마나 어리석은가 !! 아직 배우고 있습니다. 클릭 기능이 페이지로드시로드되는 곳에서 문서를 클릭 할 때 활성화되기 때문에 클릭 기능이 필요하지 않다고 생각했습니다.

— starbucks 2013-09-03

7

@starbucks 모두가 실수를 너무 많이 걱정, 특히 :) 배울 때하지 마십시오

— 뫼비우스의

4

문서 준비 기능은 페이지에서 찾은 내용을 기반으로 리스너를 설정합니다. 이렇게하지 않으면 설정되지 않습니다. 그러나이를 수행하는 가장 좋은 방법은 대신 "on ()"함수를 사용하여 위임하는 것입니다. 이렇게하면 로드 후 페이지에 추가 된 모든 요소 가 계속 작동합니다!

— Sean Kendle

1

또한 "on"기능을 사용하면 실제로 문서 준비 기능을 사용할 필요가 없습니다. 리스너를 문서 레벨로 설정 한 다음 요소가 수신 할 페이지를 스크랩합니다. 그렇기 때문에 ".listentome"이 아닌 "div.listentome"과 같이 듣고 싶은 요소 유형에 대해 좀 더 구체적으로 지정하는 것이 조금 더 빠릅니다. 이 예제에서는 "listentome"클래스의 모든 요소 를 확인하는 대신 div 만 확인합니다.

— Sean Kendle

2

@SeanKendle- .on()작동 방식 이 아닙니다 . (선택적으로)이를 사용하여 위임 된 핸들러를 생성 할 수 있지만, 어느 쪽이든 "페이지를 스크랩"하지 않고 호출하는 jQuery 객체의 특정 요소에 리스너를 바인딩합니다.

— nnnnnn

65

$ (document)와 함께 ON을 사용하여이 문제에 대한 최상의 솔루션을 찾았습니다.

 $(document).on('click', '#yourid', function() { alert("hello"); });

ID 시작은 아래를 참조하십시오.

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

마지막으로 1 주 후 onclick 트리거를 추가 할 필요가 없습니다. 나는 이것이 많은 사람들에게 도움이되기를 바랍니다.

— user5636597
소스

2

아 고마워, 위의 내용은 나에게 효과가 없었지만 효과가 있었다! (아마도 각도 및 라우팅과의 이상한 상호 작용)

— Flink

Flink와 마찬가지로이 문제도 해결했습니다. 감사합니다 .. 100 upvote에 ..

— 제타

3

그것은 위임이라고하며 동적으로 삽입하거나 이동 내용에 필요

— mplungjan

이것은 나를 위해 일했습니다! 감사합니다 :)

— Amrit Pal Singh

20

코드가 document.ready () 없이도 작동 할 수 있습니다. 스크립트가 #clicker 뒤에 있는지 확인하세요. 이 데모를 확인하세요 : http://jsbin.com/aPAsaZo/1/

준비 개념의 아이디어. 스크립트가 페이지의 최신 항목이거나 영향을받는 요소 뒤에 있는지 확인하면 작동합니다.

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

주의 사항 : 에서jsbin데모 교체 http와 https코드에가, 또는이 변형 사용 데모

— SaidbakR
소스

11

+1-귀하의 답변은 document.ready()기능이 필요한 이유를 설명 합니다.

— Kevin

1

jquery 스크립트가 'document.ready ()'함수 내에 있어야한다는 제안이 오해의 소지가 있기 때문에 이것이 더 나은 대답입니다. 예, 더 안전하지만 jquery 함수에 대한 html 요소를 즉석에서 설정하는 경우 (예 : 어떤 버튼을 클릭했는지에 따라 테이블 행을 쿼리하는 경우) 해당 함수 외부 / 뒤에 있어야합니다. 팝업 오버레이의 대상 div 이름을 실수로 변경 한 다음 스크립트 오류를 찾는 데 몇 시간을 보냈습니다. 큰 교훈을 얻었습니다.

— johnlholden

이것은 잘못된 대답입니다. JS 코드는 인라인이 아닌 DOM의 헤드에 있어야합니다. 스크립트 오류를 찾는 데 몇 시간을 소비했다는 사실은 JS 문제가 아닙니다. 문서를 제대로 읽지 못하고 디버그 도구를 사용하는 방법을 모르는 것이 문제입니다.

— Andrey Shipilov

@AndreyShipilov 누가이 페이지의 소스를보고 아래로 내려 가면 거기에 자바 스크립트 코드가 보일 것입니다.

— SaidbakR

1

@AndreyShipilov - 어떻게 당신이 이 문제를 해결하기 위해 디버깅 도구를 사용하는 방법을 알고? 그런 다음 다른 사람을 불쾌하게하지 말고 지식을 공유하십시오. 건설적이고 공정하도록 노력하십시오.

— Matt

6

$(document).ready(function(){});Look this JSfiddle로 Javascript-Code를 래핑해야합니다 .

JS 코드 :

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});

— 흑양
소스

5

$(document).ready(function(){스크립트 시작 부분에 추가 한 다음 });. 또한 divID가 클래스가 아닌 ID로 올바르게 포함되어 있습니까?

— tjons
소스

3

버튼을 클릭하지 못하게하는 버튼 (예 : div 또는 투명 이미지)이 없는지 확인합니다. 어리석게 들리지만 때때로 우리는 jQuery가 작동하지 않는다고 생각하고 모든 것이 DOM 요소의 위치에 있습니다.

— Vicgilbcn
소스

또는 예를 들어 z-index!

— a darren

3

$(function(){ // code });문서가 해당 블록 내에서 코드를 실행할 준비가되었을 때 실행되는 것을 사용할 수 있습니다 .

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});

— 라키에시 카다 다스
소스

2

핸들 바와 같은 클라이언트 측 템플릿 엔진을 사용하는 경우 js는 document.ready 후에로드되므로 이벤트를 바인딩 할 요소가 없으므로 onclick 핸들러를 사용하거나 본문에서 사용하십시오. 현재 목표를 확인

— 아비 나프 싱
소스

그래서 사실, 나는 플라스크 / 신사를 사용하고 그것은 작동하지 않습니다 나는 HTML에서 온 클릭 속성을 사용하지 않는 한 내 <script>에서에서이 함수를 참조

— 리치 스톤