2017-02-10 11 views
3

내 웹 사이트에 가입 페이지를 만들었지 만 클릭에 응답하지 않습니다. jQuery는 signup.js라는 별개의 파일에 있습니다. 나는 경보가 제대로 작동하기 때문에 그것이 제대로 연결되어 있음을 안다. 도움이 필요합니다. 감사합니다jQuery 클릭을 인식하지 못함

HTML :

<html> 
    <head> 

     <title>Sign Up</title> 
     <script src="JS/jquery-3.1.1.min.js"></script> 
     <script src="JS/signup.js"></script> 
     <link rel="stylesheet" href="CSS/signup.css"> 
     <link rel="stylesheet" href="CSS/bootstrap.min.css"> 

    </head> 

    <body> 

     <div class="container"> 

      <div class="jumbotron"> 

       <button id="signup-button">Sign Up</button> 

      </div>  

     </div> 


    </body> 

</html> 

jQuery를 :

$("#signup-button").click(function() { 
    alert("clicked"); 
}); 
+0

오류가있는 경우 콘솔 (F12)을 확인하십시오. – pravindot17

+0

콘솔에 오류가 없습니다 – RT5754

+1

jquery 플러그인 src가 유효한지 확인하고'.click (function() {}) '을 사용하는 경우 해당 이벤트를'document.ready (function {) { // 귀하의 코드})'.. – TechVision

답변

6

당신은 그것이 아니다 이후 요소에 처리기를 부착하지 않도록 DOM 요소를로드하기 전에 요소를 얻기 위해 노력하고있다 그 시점에 선물한다. 그것이 작동하게하려면 document ready handler을 사용하여 줄 바꿈을하거나 마크 업에서 요소 뒤에 스크립트 태그를 옮깁니다.

$(document).ready(function(){ 
    $("#signup-button").click(function() { 
    alert("clicked"); 
    }); 
}); 
0

은 최신 JQuery와 업데이트 이후, 모든

$('#signup-button').on('click', function(){//code here})

대신 사용하므로 .click이 더 이상 유효하지 .on에 지적하지, 당신은 준비가 DOM에 넣어 있는지 확인한다

+0

'.click()'* ''이 더 이상 유효하지 않다는 당신의 주장에 대한 증거를 제공 할 수 있습니까? '.click()'을 사용할 때 아무 문제가 없으며'.on ("click"..'을 클릭하면 완벽하게 유효하고 (경우에 따라서는 선호되는) 바로 가기입니다. –

+0

예. 죄송합니다. 내가 클릭하면 over.click .on 적은 메모리를 사용하고 동적으로 추가 된 요소에 대한 작동합니다 선호합니다. http://stackoverflow.com/a/11878976/7241073이 대답은 – FllnAngl

0

코드가 document ready에서 실행되는지 확인하십시오.

$(function(){ 
    $("#signup-button").click(function() { 
    alert("clicked"); 
    }); 
}); 
0

당신의 js 파일이 JQuery와 파일 전에 "읽기"수 아마도 때문에, 당신은 단지 머리에 jQuery를 넣어 추천하고, 신체의 끝 부분에있는 다른 자바 스크립트.

<html> 
    <head> 
     <title>Sign Up</title> 
     <script src="JS/jquery-3.1.1.min.js"></script> 
     <link rel="stylesheet" href="CSS/signup.css"> 
     <link rel="stylesheet" href="CSS/bootstrap.min.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="jumbotron"> 
       <button id="signup-button">Sign Up</button> 
      </div>  
     </div> 
     <script src="JS/signup.js"></script> 
    </body> 
</html> 

과에 JS 파일을 변경합니다

$(function(){ 
    $("#signup-button").click(function() { 
     alert("clicked"); 
    }); 
}); 

$ 때문에 (함수() {}); DOM이로드되고 조작 될 때까지 대기합니다.

+1

논리를 설명합니다. 괜찮습니다. 그러나 설명은 오해의 소지가 있습니다. * "$ (function() {}); ** jquery ** 파일이 모두로드 될 때까지 대기합니다. * –

+0

이것은 대답이 아니지만 감사합니다. – RT5754

+0

@freedomn -m 고마워;). 나는 지금 생각한다 : D –

관련 문제