왜이 자바 스크립트가 실행되지 않습니까?

jinja2 템플릿 안에서 jquery를 사용하려고합니다. 예상되는 동작은 SelectAll 상자를 선택하면 나머지 상자를 검사한다는 것입니다. 디버깅을 시작하기 위해 .change 이벤트에 경고를 추가했으며, 실행되지 않았 음을 발견했습니다. 따라서 스크립트는 실제로 호출되지 않습니다.왜이 자바 스크립트가 실행되지 않습니까?

내가 뭘 잘못하고 있니?

{% extends "layout.html" %} 
{% block head %}<head> 
{% block title %}Home{% endblock %} 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(':checkbox[name=selectAll]').change (function() { 
    $(':checkbox[name=instances]').prop('checked', this.checked); 
    alert("FOO"); 
}); 
</script> 
</head> 
{% endblock %} 
{% block body %} 

<form target="" method="GET" id="testform"> 
<div> 
Select All: <input type="checkbox" name="selectAll" id="selectAllInstances" /> <br /> 
    {% for k in tests %} 
    <input type="checkbox" name="instances" value="{{ k[1].mongo_id }}">{{ k[0] }} <br /> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Description: {{ k[1].__doc__ }} <br /> 
    {% endfor %} 
</div> 
    <br /> 
    <br /> 
    <input type="submit"> 
</form> 
{% endblock %}

출처

2013-01-11 munk

document.ready 함수 :) 기본을 익히는 데 도움이되도록이 문서를 읽어야합니다. http://stackoverflow.com/tags/jquery/info –

는 :

$(':checkbox[name=selectAll]').change(...);

에는 체크 박스라는 이름의는 selectAll 없다 - 그것은 스크립트 아래에 정의됩니다. .ready 이벤트 내부에 코드를 랩 :

$(document).ready(function(){ 
});

(브라우저가 </html>을 볼 때, 간단한 단어 단위) DOM 계층이 완전히 구축 된 이벤트 화재가.

출처

2013-01-11 20:47:14

템플릿은 빨간색 청어입니다. 이벤트 처리기를 바인드하는 스크립트가 실행될 때 확인란이 존재하지 않습니다.

몇 가지 옵션이 있습니다.

랩 (A document.ready 이벤트와 예를 들어,) 나중에 때까지 호출하는 함수의 스크립트와 지연 후 HTML의 점에 스크립트 요소를 이동
.
직접 바인딩 대신 event delegation을 사용하십시오.

출처

2013-01-11 20:43:01 Quentin

당신은 당신에게 포장 할 필요가 JQuery와의 document.ready 즉, DOM 요소를 통과 할 준비가되기 전에 스크립트가 실행없이

$(function(){ 
    $(':checkbox[name=selectAll]').change (function() { 
    $(':checkbox[name=instances]').prop('checked', this.checked); 
    alert("FOO"); 
    }); 
});

참고 :

$(function(){...code here ...});

은

에 대한 속기입니다. 이 라인은 실행 시간으로 0

출처

2013-01-11 20:45:05

왜이 자바 스크립트가 실행되지 않습니까?

답변

관련 문제