Jquery 선언에 문제가 있습니까?

최근 이벤트를 사용하는 jQuery 코드가 작동을 멈췄습니다. 나는 왜 그런지 이해하지 못한다. 신고 문제가 있습니까?Jquery 선언에 문제가 있습니까?

<head> 
    <meta charset="utf-8"> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <meta name="description" content=""> 

    <meta name="author" content=XXXXXXX"> 
    <link href="/Content/bootstrap.css" rel="stylesheet"/> 
    <link href="/Content/Bootstrap-table.css" rel="stylesheet"/> 
    <link href="/Content/site.css" rel="stylesheet"/> 
    <link href="/Content/justified-nav.css" rel="stylesheet"/> 

    <link href="/Content/simple-sidebar.css" rel="stylesheet"> 

    <link rel="stylesheet" type="text/css" href="/Content/msdropdown/dd.css" /> 
    <link href="/Content/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="/Content/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"> 

    <script src="/Scripts/jquery-3.1.1.js"></script> 

    <script src="/Scripts/jquery-3.1.1.min.js"></script> 
    <script src="/Scripts/bootstrap.js"></script> 
    <script src="/Scripts/Bootstrap-table.js"></script> 
    <script src="/Scripts/ManageSeason.js"></script> 
    <script src="/Scripts/site.js"></script> 
    <script src="/Scripts/modernizr-2.6.2.js"></script> 

    <script src="/Scripts/sidebar_menu.js"></script> 
    <script src="/Scripts/js/msdropdown/jquery.dd.min.js" type="text/javascript"></script> 

    <title>XXXXXX</title> 

</head>

그리고 내 jQuery 코드 :

$('select[class*="selectEqRaceId"]').change(function() { 
    // do some stuff 
});

및

$('#menu li a').click(
    function() { 
     // Do some stuff 
    } 
);

그것은 작동하지 않습니다

이 헤더에 내 선언이다. 단추를 클릭하거나 선택 옵션의 값을 변경합니다. 브라우저 컴파일러가이 이벤트 기능 안에 들어 가지 않습니다.

출처

2016-12-09 Dimitri Idrici

1) WITH 태그 전에? 2) 함수가'document.ready()'함수에 있는지 확인 하시겠습니까? – TheValyreanGroup

좋아요, 당신의 모든 반응을 이해 했으므로 이벤트를 사용하는 모든 함수는 document.ready()에 있어야합니다. 메인 페이지에서 document.ready를 사용해야하므로 document.ready()를 1 개만 가질 수 있습니까? 권리? –

페이지 당'document.ready()'가 하나 있습니다. 그리고 네, 모든 jQuery 함수가 그 함수에 있어야합니다. – TheValyreanGroup

jQuery를 한 번만 가져오고 $(document).ready() 함수를 사용하고 아래 예제를 살펴보십시오.

$(document).ready(function() { 
 
    $('select[class*="selectEqRaceId"]').change(function() { 
 
    console.log("Changed via slect menu"); 
 
    }); 
 

 
    $('button').click(function() { 
 
    console.log("Clicked via button"); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 
<select class="selectEqRaceId"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 
<br> 
 
<button> 
 
    Click me 
 
</button>

편집 :
당신은 거기에 코드 먹으 렴를 실행 .ready() 함수를 이벤트를 설정하기 전에 태그를 배치하거나 $ (문서)를 사용해야합니다 페이지로드가 완료된 후 $ (document) .ready() 함수를 사용하는 것은 항상 좋은 생각입니다.

내가 예를 들어 추가 : $없이 태그 후
1) 스크립트 (문서) .ready()
2) 스크립트 $ (문서) .ready() (이 실 거예요 작업)
없이 태그 전에 3) 스크립트 왜 정식 버전과 jQuery를의 축소 된 버전을 포함하는 $ (문서) .ready() 함수

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 
<h3>Script after the tags without $(document).ready()</h3> 
 
<select class="afterTheTagsWithReady"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 
<br> 
 
<button class="afterTheTagsWithReady">Click me</button> 
 
<script> 
 
    // Without the $(document).ready() function and after the tags 
 
    $('select.afterTheTagsWithReady').change(function() { 
 
    console.log("Changed via slect menu afterTheTagsWithReady"); 
 
    }); 
 

 
    $('button.afterTheTagsWithReady').click(function() { 
 
    console.log("Clicked via button afterTheTagsWithReady"); 
 
    }); 
 
</script> 
 

 

 

 
<h3>Script before the tags without $(document).ready() (this wont work)</h3> 
 
<script> 
 
    // Without the $(document).ready() function and after the tags 
 
    $('select.beforeTheTags').change(function() { 
 
    console.log("Changed via slect menu beforeTheTags"); 
 
    }); 
 

 
    $('button.beforeTheTags').click(function() { 
 
    console.log("Clicked via button beforeTheTags"); 
 
    }); 
 
</script> 
 
<select class="beforeTheTags"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 
<br> 
 
<button class="beforeTheTags">Click me</button> 
 

 

 

 
<h3>Script before the tags WITH $(document).ready() function</h3> 
 
<script> 
 
    // With the $(document).ready() function and before the tags 
 
    $(document).ready(function() { 
 
    $('select.beforeTheTagsWithReady').change(function() { 
 
     console.log("Changed via slect menu beforeTheTagsWithReady"); 
 
    }); 
 

 
    $('button.beforeTheTagsWithReady').click(function() { 
 
     console.log("Clicked via button beforeTheTagsWithReady"); 
 
    }); 
 
    }); 
 
</script> 
 
<select class="beforeTheTagsWithReady"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 
<br> 
 
<button class="beforeTheTagsWithReady">Click me</button>

출처

2016-12-09 22:29:36 Device

좋아요, 모든 응답에 대해 이해 했으므로 이벤트를 사용하는 모든 함수는 document.ready()에 있어야합니다. 메인 페이지에서 document.ready를 사용해야하므로 document.ready()를 1 개만 가질 수 있습니까? 권리? –

답변을 편집했습니다. – Device

간단히 말해서, 그렇습니다. head 요소에 모든 스크립트를로드 중이므로 스크립트가 올바르게 실행되고 있습니다. 스크립트를로드 할 때 발견 한 모든 요소에 이벤트 핸들러를 연결합니다 (본문의 DOM 트리가 아직 구성되지 않았으므로 아무 것도 없음).

요소를 조작하기 전에 요소가 DOM 트리에로드 될 때까지 기다려야합니다. 따라서 닫는 본문 태그의 끝 바로 앞에 JS 코드를로드하여 문제를 해결할 수 있습니다 (예 : 다른 요소) 또는 JQuery 헬퍼 $().ready(function)을 사용하여 요소 트리에 이벤트 처리기를 연결하기 전에 DOM 트리가 완전히로드 될 때까지 대기 할 수 있습니다.

$().ready(function(){ 
    $('#menu li a').click(function() { 
     //Do some stuff 
    }); 
});

출처

2016-12-09 22:21:35

좋아요, 당신의 모든 반응을 이해 했으므로, 이벤트를 사용하는 모든 함수는 document.ready()에 있어야합니다. 메인 페이지에서 document.ready를 사용해야하므로 document.ready()를 1 개만 가질 수 있습니까? 권리? –

어디서든 $(). 준비를 배치 할 수 있습니다. 그것은로드 될 때마다 DOM 트리 구조가 완료 될 때까지 기다릴 것이다. –

Jquery 선언에 문제가 있습니까?

답변

관련 문제